JSFiddle 在这里 - http://jsfiddle.net/2R36y/
相关跨度代码——
CSS
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;
}
HTML
<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>
最佳答案
一种方法是使用 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;
}
关于html - 垂直对齐跨度内的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17959894/