CSS3 文本不会垂直对齐

Question

我正在尝试为我的网站制作页脚，但页脚内的文本显示一半在页脚内，一半在页脚外 div。我尝试使用 How do I vertically center text with CSS? 中建议的所有方法来纠正它，并在互联网上搜索其他想法，但 none 有效（除非我搞砸了将它们应用到我的代码中）。这是我的代码。 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 中的任何 margin/padding。

这是更新后的 Fiddle：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 文本不会垂直对齐

CSS3 Text Won't Vertically Align

html

css

twitter-bootstrap

twitter-bootstrap-3