[英]Vertically aligning text inside a span
JSFiddle在這里 - 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>
一種方法是使用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;
}
使用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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.