[CSS] Aligner verticalement un texte dans un bloc div

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

Bobez
WRInaute impliqué
WRInaute impliqué
 
Messages: 716
Inscription: 20 Mai 2004

[CSS] Aligner verticalement un texte dans un bloc div

Message le Jeu Juin 03, 2004 21:25

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
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 24
Inscription: 15 Juil 2003

Message le Jeu Juin 03, 2004 21:37

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
WRInaute impliqué
WRInaute impliqué
 
Messages: 716
Inscription: 20 Mai 2004

Message le Jeu Juin 03, 2004 21:45

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
WRInaute accro
WRInaute accro
 
Messages: 2899
Inscription: 16 Jan 2004

...

Message le Ven Juin 04, 2004 9:50

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
WRInaute impliqué
WRInaute impliqué
 
Messages: 716
Inscription: 20 Mai 2004

Message le Ven Juin 04, 2004 11:35

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

Julia41
WRInaute passionné
WRInaute passionné
 
Messages: 1837
Inscription: 31 Aoû 2007

Message le Jeu Oct 04, 2007 11:48

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
WRInaute discret
WRInaute discret
 
Messages: 85
Inscription: 1 Oct 2007

Message le Jeu Oct 04, 2007 14:23

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
WRInaute discret
WRInaute discret
 
Messages: 85
Inscription: 1 Oct 2007

Message le Jeu Oct 04, 2007 16:30

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

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

twistix
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 1
Inscription: 23 Mai 2007

Re: [CSS] Aligner verticalement un texte dans un bloc div

Message le Ven Aoû 07, 2009 12:11

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


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par les experts Google Analytics de Ranking Metrics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :