Непонятные проблемы с выравниванием текста

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

Вот что я вижу в вашем 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>

У вас не будет проблем.

Answer 3

display: block; и line-height:200px на .sopa-box .title будут центрированы как горизонтально, так и вертикально