CSS導航垂直對齊

我不知道獲得我想要的結果的最佳做法。我在這裏使用了桌子，這使我接近我想要的東西。CSS導航垂直對齊

結果沒有垂直居中的文本，我不知道如何。使用UL讓這個嘗試，但沒有運氣：

#hotspotbg table { 
 
    margin-top: 1px; 
 
} 
 
#hotspotbg table tr td { 
 
    border-right: 1px solid #ccc; 
 
    border-left: 1px solid #ccc; 
 
} 
 
#hotspotbg table tr td a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    color: #fff; 
 
    height: 51px; 
 
} 
 
#hotspotbg table tr td a:hover { 
 
    background: #FFF; 
 
    color: #000; 
 
}

<table width="900" height="51px" border="0" cellspacing="0" cellpadding="0" align="center"> 
 
    <tr> 
 
    <td width="25%" height="51" valign="middle"><a href="#">Home</a> 
 
    </td> 
 
    <td width="25%"><a href="#">Products</a> 
 
    </td> 
 
    <td width="25%"><a href="#">Reviews</a> 
 
    </td> 
 
    <td width="25%"><a href="#">Contact</a> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2015-07-09 James K

那你究竟想對齊？在哪兒？ –

也許你正在尋找這個http://stackoverflow.com/questions/9249359/is-it-possible-to-vertically-align-text-within-a-div – Garry

設置行高的孩子的（在你的情況下元素）到的高度父母，將垂直對齊和元素的文本。請參閱下面的詳細信息。

.wrapper { 
 
    height: 70px; 
 
    width: 100%; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper a { 
 
    /*NOT AFFECTING THE VERTICAL ALIGN*/ 
 
    display: block; 
 
    float: left; 
 
    height: 70px; 
 
    width: 50%; 
 
    color: #fff; 
 
    text-align: center; 
 
    /*AFFECTING VERTICAL ALIGN*/ 
 
    line-height: 70px; 
 
}

<div class="wrapper"> 
 
    <a href="#">test</a> 
 
    <a href="#">nice</a> 
 
</div>

來源

2015-07-10 00:12:00 timonwimmer

CSS導航垂直對齊

回答

相關問題