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: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>

問題はありません。