css - 令人困惑的文本对齐问题

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;和line-height:200pxon.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>

你不会有任何问题。