令人困惑的文本对齐问题

Question

我正在建立一个网站，帮助人们更加了解互联网带来的威胁。

我遇到了一个非常恼人的CSS问题，文本不会水平或垂直居中，通常似乎没有正确地听css。我已经检查过任何覆盖它的东西，但没有任何东西。

http://nblackburn.me/pofa/

Answer 1

您将文本置于范围内，因为范围只是文本的大小，因此不起作用。您需要使用p元素并使用text-align:center，或者将text-align:center添加到范围的父级。

要垂直对齐，您可以将元素的父级设置为display:table;，将元素设置为display:table-cell; vertical-align:middle;。这将垂直对齐元素。

Answer 2

display: block;上的{p> line-height:200px和.sopa-box .title将水平和垂直居中

Answer 3

我在CSS中看到的内容：

.sopa-box .title {
    font-size: 50px;
    font-weight: 700;
    text-shadow: 1px 1px 0px #111111;
    text-align: center;
}

继承人应该是什么：

.title {
    font-size: 50px;
    font-weight: 700;
    text-shadow: 1px 1px 0px #111111;
    text-align: center;
}

使用时那样：

<div class="sopa-box">
     <span class="title">SOPA</span>
</div>

你不会有任何问题。