28172 sujets

CSS et mise en forme, CSS3

Vertical-align sans effet

Bonjour à tous,
j'ai un menu horizontal qui est constitué d'une liste. Chacun des li a une image en background au dessus de laquelle je viens positionner l'intitulé (texte) de chacun des éléments de mon menu. C'est justement cet intitulé (texte) que je n'arrive pas à aligner verticalement. Je ne vois pas ce qui n'est pas bon.

Peut-être que vous y verrez plus clair ? Voici mon code:

mon menu :


<div id="entete">
                    <img src="_images/LogoLangeADomicile.jpg" alt="Logo Langes à Domicile" width="295" height="88"/>
                    <img src="_images/MenuNull.jpg" alt="Name" width="16" height="88"/>
                    <ul>
                        <li id="MenuGenHome">Home</li>
                        <li id="MenuGenChoisir">Choisir</li>
                        <li id="MenuGenContact">Contact</li>
                        <li id="MenuGenSitemap">Sitemap</li>
                        <li id="MenuGenConditions">Conditions</li>
                    </ul>

                </div>


et le CSS


#entete
	{
	 padding: 20px 0px 20px 0;
         float: left;
         width: 100%;
	}
#entete h1
	{
	 margin: 0;
       	 float: left;
         clear: both;
	}
        
#entete img
        {
         float: left;
        }

#entete ul li
        {
         list-style:none;
         float: left;
         text-align: center;
         color: red;
         vertical-align: middle;
        }

#entete ul #MenuGenHome
        {
         background: url(../_images/MenuHome.jpg);
         width: 69px;
         height: 88px;
        }
#entete ul #MenuGenChoisir
        {
         background: url(../_images/MenuChoisir.jpg);
         width: 90px;
         height: 88px;       
        }
#entete ul #MenuGenContact
        {
         background: url(../_images/MenuContact.jpg);
         width: 91px;
         height: 88px;       
        }
#entete ul #MenuGenSitemap
        {
         background: url(../_images/MenuSitemap.jpg);
         width: 90px;
         height: 88px;       
        }
#entete ul #MenuGenConditions
        {
         background: url(../_images/MenuConditions.jpg);
         width: 290px;
         height: 88px;       
        }


Est-ce que quelqu'un a une idée ?

Merci pour votre aide.
Salut,

Pour aligner ton texte verticalement utilises sur tes "li" un attribut "line-height:88px".
Sinon tu peux utiliser des marges internes à tes éléments de liste mais tu ne maîtrisera pas forcément leur hauteur à 88px. Smiley cligne
Hello Spacedementia

merci pour ta réponse effectivement avec un "line-height" sur les li cela fonctionne.
Mais je ne comprends pas pourquoi le verticalign-align ne marche pas alors qu'il est fait pour ça non ?

Encore merci
vertical-align ne fonctionne qu'avec les cellules de tableau (<td>, et <th> je crois) ou avec les éléments ayant un display: table-cell.
Sujet clos
Aller à