Question

如何将此导航栏水平和垂直居中？

以下是导航栏的屏幕截图：http://puu.sh/7luYN

HTML代码

<div class="content">
    <div class="nav">
        <ul>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Startseite</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Leistungen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Referenzen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Kontakt</a></li>
        </ul>
    </div>
</div>

CSS代码

.nav {
    background-color: #CCCCCC;
    font-family: 'Source Sans Pro', sans-serif;
    height: 45px;
    padding-left: 170px;
}
.content {
    width: 800px;
    height: 500px;
    margin:0 auto;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    width: auto;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin:0 auto;
}
.nav a {
display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #000000;
text-decoration: none;

}

我已经让它以水平为中心但我怎样才能将它垂直居中？

我希望你的答案，

感谢Felix

Answer 1

这是我为类似答案创建的 PEN 。有三种方法可以垂直对齐您的内容。根据我的说法，这里最合适的是线高法。

Answer 2

如果您只想使用css，则需要将其设置为绝对位置，顶部和左侧为50％，并将margin-top和margin-left设置为-height / 2和-width / 2。

position: absolute;
top: 50%;
left: 50%;
height: 45px;
margin-top: -22.5px;
width: 440px;
margin-left: -220px;

http://jsbin.com/galapudo/1/edit?html,output

如果要将居中的垂直/水平放在其他div中，请将该div设置为position：relative;

我希望这会对你有所帮助。

Answer 3

有多种方法，请参阅以下文章：http://phrogz.net/CSS/vertical-align/

我最喜欢的方法是使用display: table;（在容器上）和display: table-cell结合vertical-align: middle（在项目本身上），如下所示：

http://jsfiddle.net/G6vxs/

Answer 4

垂直对齐的单线近似：.nav {margin-top : 45%;} （我想将此添加为Daniel Rogi的回答，但我没有足够的声望点......）

导航栏水平+垂直居中

4 个答案: