Question

我在垂直居中链接方面遇到了麻烦。任何人都可以告诉我如何在＃nav-links div中垂直居中我的链接？我的布局在http://deliciousmanga.com/demo/

Answer 1

您应该使用表格行为并将导航栏容器设置为最大高度：

#nav-links {
    float: right;
    width: 48%;
    height: 100%;
    display: table;
}
#nav-links ul {
    display: table-cell;
    overflow: hidden;
    vertical-align: middle;
}

Answer 2

简单的方法是调整padding-top：* px on＃nav-links

另一种方法是在div中创建所有内容，然后设置div的样式，并在div中写入文本。设定位置：相对;上：50; transform：translate（0，-50％）;

Answer 3

最简单的方法是通过CSS修复行高等于容器高度

在您的情况下，如果您想保留所有工作，可以更改元素的上边距

#nav-links a {
    float: left;
    text-decoration: none;
    color: #CC020C;
    font-size: 1em;
    font-weight: bold;
    margin-left: 1%;
    margin-right: 1%;
    padding: 2%;
    background-color: #FFF;
    margin-top: 10px;
}

如何将div中的链接居中？

3 个答案: