Question

我正试图为我的网站制作一个页脚，但页脚内的文字显示的是页脚div的一半和一半。我试图使用How do I vertically center text with CSS?中建议的所有方法来纠正它，并在互联网上搜索其他想法但没有工作（除非我搞砸了将它们应用到我的代码中）。这是我的代码。 JSFiddle：http://jsfiddle.net/xyqgpr14/2/

页脚html

<nav class="navbar navbar-default navbar-bottom" role="navigation">
    <div class="container">
        <h1>Footer</h1>
    </div>
</nav>

样式CSS：

.navbar-bottom {
    background-color: #222;
    border-top: 2px solid #000;
    height: 50px;
    color: #777;
    text-align: center;
}

Answer 1

最新方法涉及：

.container {
   position:relative;
}

h1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

或类似的东西。

Answer 2

由于您使用的是Bootstrap，因此导航中会出现默认边距或填充。

将此添加到css：

.navbar-bottom * {
    padding: 0;
    margin: 0;
}

这将删除导航子div中的任何边距/填充。

这是更新的小提琴：http://jsfiddle.net/xyqgpr14/3/

Answer 3

您可以使用多种方法。这是最新的方法：

.navbar-bottom {
    background-color: #222;
    border-top: 2px solid #000;
    height: 50px;
    color: #777;
    text-align: center;
}

.navbar-bottom .container {
   position:relative;
}

.navbar-bottom h1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

或者

.navbar-bottom {
    background-color: #222;
    border-top: 2px solid #000;
    height: 50px;
    color: #777;
    text-align: center;
}

.navbar-bottom .container {
    display: table;
}

.navbar-bottom h1 {
    display: table-cell;
    vertical-align: middle;
}

Ian D。已经说了第二个，你可以试试我的！我认为这是行不通的，因为你完全复制了他的代码。请定位CSS中的特定元素，否则可能会覆盖上面的其他代码。我的代码可以完全复制原样！他们两个都很好。只需将它们中的任何一个复制到您的jsfiddle并查看其影响。：）

CSS3文本不会垂直对齐

3 个答案: