html - my vertical text align middle did not work -


there wrong code. need vertically center text in middle of each box.

#navcontainer {     padding: 0 5 20px 10px; } ul#navlist {     font-family: sans-serif; } ul#navlist {     font-weight: bold;     text-decoration: none;     display: inline-block;     line-height:20px vertical-align: middle; } ul#navlist, ul#navlist ul, ul#navlist li {     margin: 0 8px;     padding: 0px;     list-style-type: none;     box-shadow: 8px 8px 12px #aaa; } ul#navlist li {     float: left; } ul#navlist li {     color: #ffffff;     background-color: #ef634a;     //padding:10px;     padding: 10px 5px 10px 5px;     border: 1px #ffffff outset;     height: 40px; } ul#navlist li a:hover {     color: #ffff00;     background-color: #003366; } ul#navlist li a:active {     color: #cccccc;     background-color: #003366;     border: 1px #ffffff inset; } ul#subnavlist {     display: none; } ul#subnavlist li {     float: none; } ul#subnavlist li {     padding: 0px;     margin: 0px;     height: 20px; } ul#navlist li:hover ul#subnavlist {     display: block;     //display: inline-block;     //display: table-cell;     position: absolute;     font-size: 8pt;     padding-top: 5px; } ul#navlist li:hover ul#subnavlist li {     display: block;     width : 260;     height : 100;     border: none;     padding: 2px; } ul#navlist li:hover ul#subnavlist li a:before {     content:" >> "; } 

and

<div id="navcontainer">     <ul id="navlist">         <li><a href="obs-geostrategique-sport.php?cat=1">programme europÉen de lutte <br/>contre le trucage de matchs</a>         </li>         <li><a href="obs-geostrategique-sport.php?cat=2">actualitÉs sportives</a>         </li>         <li><a href="obs-geostrategique-sport.php?cat=3">communiquÉs</a>         </li>         <li id="active"><a href="obs-geostrategique-sport.php?cat=4" id="current">thematiques</a>              <ul id="subnavlist">                 <li id="subactive"><a href="#" id="subcurrent">lutte contre la corruption</a>                 </li>                 <li><a href="obs-geostrategique-sport.php?cat=4&id=1">evènements sportifs </a>                 </li>                 <li><a href="obs-geostrategique-sport.php?cat=4&id=2">bonne gouvernance du sport</a>                 </li>                 <li><a href="obs-geostrategique-sport.php?cat=4&id=3">economie du sport</a>                 </li>                 <li><a href="obs-geostrategique-sport.php?cat=4&id=4">lutte contre le dopage</a>                 </li>                 <li><a href="obs-geostrategique-sport.php?cat=4&id=5">lutte pour l'intégrité dans le sport</a>                 </li>             </ul>         </li>     </ul> </div> 

here fiddle http://jsfiddle.net/r8s7q/

1) use line-height on li center , revert normal on anchor (to deal multiline text)

2) place padding / hover classes on li element instead on anchor.

fiddle

   ul#navlist li    {     padding: 10px 5px 10px 5px;     background-color: #ef634a;    }    ul#navlist > li    {     height:62px; /* <----  */     line-height:62px; /* <----  */    }     ul#navlist li:hover     {         color: #ffff00;         background-color: #003366;     }     ul#navlist     {     font-weight: bold;     text-decoration: none;     display: inline-block;     line-height:normal; /* <----  */     vertical-align: middle; /* <----  */     } 

Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -