Question

我试图垂直对齐li元素中的某些文本，但我能做到的唯一方法是将display:table-cell;和vertical-align:middle;应用于li元素。

当我这样做时，会导致整个导航栏失去水平中心。我做了很多谷歌搜索并没有找到解决方案。

HTML：

<div class="h_logo"><img src="http://dummyimage.com/800x200/000/fff.jpg"></div>
<div class="h_nav">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Web Hosting</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Consulting</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

CSS：

/** All code is written in chronological form as with the HTML code.
* h. = header.element
* b. = body.element
* sl./sr. = sidebarleft or right.element
**/
.h_logo{
background-repeat:no-repeat;
width:800px;
height:200px;
margin:auto;
position:static;
}
.h_nav{
position:inherit;
margin-top:10px;
}
.h_nav li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:150px;
height:35px;
background-color:black;
}
.h_nav a{
text-decoration:none;
color:#FFFFFF;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}

JSFiddle

Answer 1

你可以将它添加到你的CSS：

nav ul {
    display: table;
    margin: 0 auto;
    padding: 0;
}

使用display时无法使导航栏居中：table-cell;

1 个答案: