html - 文本对齐中心由于某种原因不起作用？

Question

我似乎无法让我的文字居中对齐。它在垂直方向上工作正常，但文本对齐似乎受到某些影响。

这是该元素标题(顶部的主图像)中的“Autorondreis”文本:

Example

我试图垂直和水平居中的带有 .center-text 类的 h1 元素:

position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
display: block;
color: white;
text-shadow: 0 1px 5px grey;

谁能帮我看看为什么它没有水平居中？

Answer 1

您需要添加样式 clear:both到 2 个元素，即 h1标签类 center-text和 nav标签类 navigation-menu

因此，您更新后的 CSS 将如下所示

.navigation-menu {
    position: relative;
    z-index: 1;
    clear: both;
}

.center-text {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    display: block;
    color: white;
    text-shadow: 0 1px 5px grey;
    clear: both;
}