Vertical-align

[Fruge]

Bonjour,

Bon, c'est peut être la fatigue, mais là, je bloque !

Je veux centrer verticalement un texte dans un <div> :

<div style="height:100px;width:400px;background-color:#EEEEEE;"><h1>Test</h1></div>

Ca parait tout bête, mais là, je ne vois pas ! J'ai essayé le "vertical-align:..." qui marche bien d'habitude (enfin, quand je l'utilise pour un élément d'un tableau....) ; mais là, pour le div, ca ne marche pas !

Vous avez une idée ?

Fruge

[Monique]

Bonjour Fruge,

Je te rassure, ce n'est pas la fatigue

Centrer un texte ou un bloc verticalement n'est pas si évident.

En effet, l'attribut vertical-align ne permet ni de positionner un texte (ni aucun type de bloc) verticalement dans un bloc.

La solution : utiliser des marges négatives.

Un exemple : Dead Centre si tu affiches le code source de la page, tu verras notamment le style de ces deux blocs

#horizon        
	{
	color: white;
	background-color: transparent;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

#content    
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	width: 250px;
	height: 70px;
	visibility: visible
	}

Un autre exemple sur alsacreations

Voilà, il ne te reste plus qu'à adapter à ta page

[Fruge]

Merci bien Monique !

J'ai commencé à lire, et je vais voir ce que je peux en tirer...

Fruge