28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical de texte

Salut

voila le truc : j'ai un menu sous forme de liste avec des images en arriere pland de 25 pixels, je veux centrer le texte (du verdana 9 px) et ce verticalement... J'utilise les marges négatives comme expliqué sur alsacréation... Smiley cligne
J'applique un span pour le texte, mais celui ci se positionne au milieu de la liste, mais pas au milieu de l'image, c'est où que j'ai faux ?? Smiley decu



Voici un bout du code :

XHTML :
<ul>
<li class="menutop"><span class="valign">Moto</span></li>
<li class="menuseul">Concerts</li>
<li class="menuseul">Paysages</li>
<li class="menuseul">Autres Sports</li>
<li class="menuseul">Inclassables</li>
<li class="menutop">Book</li>
<li class="menuseul">Actus</li>
<li class="menuseul">Goodies</li>
<li class="menutop"><a href="../photo_filmage.php" title="Retrouvez vos photos de courses avec votre numéro de dossard !!">Photo
Filmage</a></li>
</ul>

CSS :
.valign {
position:absolute;
top: 50%;
height: 9px;
margin-top: -4px;

}
.menugauche ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
width: 128px;
height: 300px;
margin: 0px;
padding: 0px;
list-style-type: none;


}
.menutop {
background-image: url(images/menu_seul.jpg);
height: 25px;
width: 91px;
margin-top: 6px;

}
Modifié le 19 Oct 2004 - 22:26
Comme span est une balise en ligne, je commencerais par lui appliquer display:block en suite, pour ce qui est du margin-top, je pense que ce serais mieux si tu exprimais la valeur en em (important si tu veux tenir compte d'un eventuel changement de taille du texte)

.valign {
  display:block;
  position:absolute;
  top: 50%;
  height: 9px;
  margin-top: -0.5em;
}
Vu le lien, j'ai tout compris, j'apprends plein de trucs ici Smiley biggrin

Par contre la solution marche pas, je retourne au charbon...
Administrateur
Au fait, pour tous ceux qui espèrent utiliser la propriété "vertical-align" pour centrer leur texte dans un bloc :

Attention à bien comprendre ce que signifie Vertical align en CSS

Doc CSS2 a écrit :
S'applique à : ceux des éléments de type en-ligne et à l'élément 'table-cell'

Doc CSS2 a écrit :
Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.

Note : la signification des valeurs pour cette propriété est légèrement différente dans le contexte des tables. Consulter le chapitre traitant des algorithmes pour la hauteur des tables pour le détail.


Vertical align n'est pas prévu pour aligner un texte dans un bloc, mais un élément en-ligne dans un autre élément en-ligne (par exemple une image à côté d'un texte)... ou dans un élément de type table-cell.
Sujet clos
Aller à