Question

您好，我是css3的新手，我已经搜索了几个小时，如何在我的导航栏中垂直对齐文本。我已尝试在stackoverflow找到的每个解决方案，但无法解决我的问题。所以我认为这可能是我的代码本身并决定把它放在这里并寻求帮助。

我想知道如何使用css垂直对齐我的导航栏。这是我到目前为止所拥有的......

#nav{
    margin:0px;
    padding:0px;
    width:100%;
    height:80 px;
    background-image:url('images/navbar bg.png');
    background-repeat:repeat-x;
    text-align:center;
}

#nav ul{
    margin:0;
    padding:0;
    list-style-type:none; 
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
}

#nav li{
    margin:0px;
    padding:0px;
    float:left;
}

#nav a{
    margin:0px;
    padding:0px;
    width:114px;
    height:80px;
    background-image:url('images/btn.png');
    background-repeat:no-repeat;
    text-decoration:none;
    text-transform:uppercase;
    display:block;
}

我的HTML看起来像这样......

<div id="nav">
    <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#contact">CONTACT</a></li>
    </ul>
</div>

我非常感谢你能给我的任何帮助。

Answer 1

更改#nav a个链接的CSS，以使用display:table-cell;和vertical-align:middle;。

<强> jsFiddle example

Answer 2

您可以在#nav li

上使用行高规则

#nav li{
  margin:0px;
  padding:0px;
  float:left;
  line-height: 5.5em;
}

Answer 3

通过使用3行代码，您可以垂直居中于未知高度。检查 DEMO 。

#nav ul{
margin:0;
padding:0;
list-style-type:none;
  /*Need to add only 3 lines for vertical align*/
position: relative;
top: 30%;
transform: translateY(-30%);
}

Answer 4

尝试在#nav a使用vertical-align：middle，或者如果它不起作用，请在#nav li。

在css上垂直对齐

4 个答案: