JSFiddle here - http://jsfiddle.net/2R36y/
相关范围代码 -
nav ul li a span {
font: 30px"Dosis", sans-serif;
text-transform: uppercase;
position: relative;
left: 120px;
width: inherit;
height: inherit;
display: none;
text-align: left;
}
<nav>
<ul>
<li> <a href="#">
<span>Home</span>
</a>
</li>
<li> <a href="#">
<span>About</span>
</a>
</li>
<li> <a href="#">
<span>Portfolio</span>
</a>
</li>
<li> <a href="#">
<span>Contact</span>
</a>
</li>
</ul>
</nav>
答案 0 :(得分:6)
一种方法是使用display: table-cell;
和vertical-align: middle;
- 您也可以使用line-height
,因为<span>
具有固定的高度。
nav ul li a:hover span {
font: 30px"Dosis", sans-serif;
text-transform: uppercase;
position: relative;
left: 120px;
width: inherit;
height: inherit;
display: table-cell;
vertical-align: middle;
text-align: left;
}
答案 1 :(得分:0)
使用display:table
。
nav ul li {
list-style: none;
margin: 0 0 0 0;
display: table;
}
nav ul li a:hover span {
display: table-cell;
vertical-align: middle;
background-color: #000000;
}