2015-07-09 135 views
0

我不知道获得我想要的结果的最佳做法。我在这里使用了桌子,这使我接近我想要的东西。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>

+0

那你究竟想对齐?在哪儿? –

+0

也许你正在寻找这个http://stackoverflow.com/questions/9249359/is-it-possible-to-vertically-align-text-within-a-div – Garry

回答

1

设置行高的孩子的在你的情况下元素)到的高度父母,将垂直对齐元素的文本。请参阅下面的详细信息。

.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>