[CSS] Aligner verticalement un texte dans un bloc div

[Bobez]

Bonjour,

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

Code: Tout sélectionner

.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 !

[lilith]

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.)

[Bobez]

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: Tout sélectionner

.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

[Grantome]

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.

[Bobez]

Oui, finalement je lui ai donné un nom à part entière, et je fais un <p class="machin">

[Julia41]

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: Tout sélectionner

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

[Nico92]

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

[Nico92]

Essaies juste de coller ca JUSTE AVANT le liens dans ton bouton

<span style="display: inline-block;height: 50%;width: 1px;"></span>

[twistix]

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