我的代码有问题。我需要将文本垂直居中在每个框的中间。
#navcontainer {
padding: 0 5 20px 10px;
}
ul#navlist {
font-family: sans-serif;
}
ul#navlist a {
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 a {
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 a {
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 a {
display: block;
width : 260;
height : 100;
border: none;
padding: 2px;
}
ul#navlist li:hover ul#subnavlist li a:before {
content:" >> ";
}
和
<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>
这是 fiddle http://jsfiddle.net/R8S7q/
最佳答案
1) 在 li 上使用 line-height 居中,然后在 anchor 上将其恢复为正常(以处理多行文本)
2) 将 padding/hover 类放在 li 元素上,而不是 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 a
{
font-weight: bold;
text-decoration: none;
display: inline-block;
line-height:normal; /* <---- */
vertical-align: middle; /* <---- */
}
关于html - 我的垂直文本居中对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18446840/