[CSS] Aligner verticalement un texte dans un bloc div

WRInaute impliqué
Bonjour,

J'ai un bloc div défini comme suit :

Code:
.head2 {
	background: #336699;
	width: 770px;
	height: 15px;
	font-weight: bold; color: #ffffff; text-align: left;
	border: 1px solid #202020; border-left-width: 0; border-right-width: 0;
}

À l'intérieur de ce bloc, je veux mettre du texte, mais je ne parviens pas à le centrer verticalement. Un "vertical-align: middle;" n'a aucun effet ici.
N'y-a-t-il pas un moyen simple de le faire directement en CSS, sans devoir passer par un span/style ou autre ?

Merci !
 
Nouveau WRInaute
Bonsoir,

Est-ce que cela viendrait-il du fait que tu as ecrit text-align:left ? et peut-etre suffit-il d'ecrire text-align:center, à la place ?

(je m'exprime au conditionnel car je ne connais que tres moyennement les CSS.)
 
WRInaute impliqué
Bonsoir,

Si j'ai correctement compris le truc, "text-align" ne gère que l'alignement horizontal du texte (gauche, droite, centré, justifié) et pas l'alignement vertical.

Mais je viens de trouver une soluce :

Code:
.head2 p {
	vertical-align: middle; display: inline;
}

Et je met un <p> à l'intérieur de mon <div class="head2">, et ça fonctionne parfaitement ! Je pense que c'est une solution correcte :)
 
WRInaute passionné
...

Ouais, mais le jour ou tu donne des caractéristique spécial à ta balise p, ce texte aussi les prendra.
Genre, hop, je décale la première ligne d'un p de 75 px. hop, ta petite phrase sera décalé horizontalement.
 
WRInaute impliqué
Oui, finalement je lui ai donné un nom à part entière, et je fais un <p class="machin"> :)
 
WRInaute passionné
Désolé de up ce post datant de 2004, mais il est tout à fait mon problème, j'ai du texte dans un bloc servant de bouton, et ce texte colle au bas du bouton...

Je découvre le CSS, voici la partie à modifier :
Code:
a.page-options {
	color: #000000; 
	text-decoration: none; 
	display: block;
	width: 650px;
	height: 15px;
	text-align: left; 
	padding: 5px; 
	background: #6060e0;
	margin: 2px 0 0 0;
	margin-left: 30px;
	border-bottom: 1px solid #555555;
}

J'ai un peu tout tenté, des vertical-align...
J'ai le "display: block" qui pose un légé problème...

Voilou :p
 
WRInaute discret
Donc, tu as un lien (de classe page-option) dans un div, et tu veux le centrer verticalement ?

PS : attention, tu définies deux fois le margin left ;)
 
WRInaute discret
Essaies juste de coller ca JUSTE AVANT le liens dans ton bouton

<span style="display: inline-block;height: 50%;width: 1px;"></span>
 
Nouveau WRInaute
Perso je le fais comme ça et ça marche sous tous les navigateurs:

.head2{
color:#000;
line-height:32px;
font-weight: bold;
padding-left:20px;
background-image:url(./themes/defaut/images/site/fond.gif);
background-repeat:no-repeat;
}
.head2 div{
vertical-align: middle;
}


a+++
Twistix
 
Discussions similaires
Haut