28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai un menu verticale composer d'une liste dans laquelle je donne une hauteur definie et une image en arrière plan. Je n'arrive pas a centrer verticalement mon texte.
pour le html

<div id="bloc_decouvrez">
      <ul>
        <li class="bloc_left_top">D&eacute;couvrez</li>
        <li><a href="#">items 1</a></li>
        <li><a href="#">items2</a></li>
        <li class="bloc_left_bottom">&nbsp;</li>
      </ul>
    </div>


et voici les css que j'ai définie



.bloc_left_top{ height:26px; width:230px;text-indent:38px;vertical-align:middle;color:#fff; font-size:1.2em; font-weight:bold; background:#fff url(/templates/bibliomedias/images/bloc_left_top.png) top no-repeat ;}
/*.bloc_left_top p{ position:relative; left:38px; top:5px;color:#fff; font-size:1.2em; font-weight:bold;}*/
.bloc_left_bottom{height:8px; width:230px;background:#fff url(/templates/bibliomedias/images/bloc_left_bottom.png) top no-repeat ;}

#bloc_decouvrez li a {display:block;height:26px; width:230px; text-indent:15px ; color:#333; font-weight:bold; background:#fff url(/templates/bibliomedias/images/bloc_decouvrez.png) top no-repeat ; text-decoration:none;vertical-align:middle;}


vertical-align:middle ne marche dans aucun des cas. Comment faire pour centrer verticalement le texte

Merci de votre aide
Salut,
Tu peux donner la propriété line-height à tes liens, comme ils sont en display:block, et qu'ils ne comportent qu'une seule ligne, ça devrait les centrer verticalement.

Sinon, avec des paddings top et bottom.

Byebaille.
le line-height marche parfaitement bien. J'avais essayé le padding mais avec ça le décalait aussi l'image de background.
Merci pour l'astuce... Smiley biggrin