Text-align 中心出于某种原因无法正常工作？

Question

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

这是本项目 header（主图在上）中的 "Autorondreis" 文字：

带有 .center-text class 的 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

它正以它的 parent div 为中心。

尝试这样做：

body > #YourDiv
{ 
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
display: inline; <---Changed to inline
color: white; 
text-shadow: 0 1px 5px grey;
}

让我知道你取得了什么成果。

Answer 2

试试这个

将您的 h1 标签调整为

h1{width:100%;}

那么你的 h1 class="center-text" 应该是居中的。

Answer 3

您需要将样式 clear:both 添加到 2 个元素，即 h1 标签与 class center-text 和 nav 标签与 class 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;
}

Answer 4

仅使用这些 css 它们会起作用，我已经尝试使用我的 Firefox 代码检查器及其工作 -

.center-text {
    position: relative;
    top: 50%;
    left: 50%; /* added this line and changed the next four lines */
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    display: inline-block; /* changed this line */
    color: white;
    text-shadow: 0 1px 5px grey;
    clear: both;
}

Text-align 中心出于某种原因无法正常工作？

Text-align center not working for some reason?

html

css

centering