1行のテキストがdivの中心に揃っていない

Question

複数行のタイトルを持つdivの場合、テキストは中央に完全に揃えられます。しかし、単一行のタイトルの場合、これは当てはまりません（テキストアライメントを中央に設定しても）。テキストは、親スパンの左境界線に揃えられます。絶対に些細なようだが、それを正しくすることはできなかった。ここで

span.text-content { 
 
    background: rgba(255,255,255,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    opacity:0; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: #000; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    position:absolute; 
 
    top: 45%; 
 
}

<span class="text-content"><span>Post Title</span></span>

Answer 1

あなたのコードを使用して修正が（私はそれを見ることができるので、私は、背景色や不透明度を変更）です。

主な変更点は、親表示：テーブルを作成し、テキストの配置が機能するように子のスパン幅を100％にすることでした。

span.text-content { 
 
    background-color: white; 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: #000; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    position:absolute; 
 
    top: 45%; 
 
}

<span class="text-content"><span>Post Title</span></span>

Answer 2

織り：http://kodeweave.sourceforge.net/editor/#fe0c9da444a8df390c6242afa00f0bb3

それは簡単な修正です！

display table-cellを使用する場合、親要素は、である必要があります。display tableです。

注：デフォルトでは、スパン要素はdisplay inlineです。すでにvertical-align middleを使用しているので、あなたのテキストは水平にあなたがtable-cellの親にこのケースでtext-align centerを（持っている必要が中心のようにするに

。

この場合にも、あなたが位置（またはトップを必要としないが）table-cellに適用しましたtable-cellに縦にテキストを中央揃えに加えて

あなたspan.text-contentで資格過剰だけ.text-contentを使用する代わりに

をBTW：。。私はに不透明度を削除私はそのテキストを見ることができた。あなたは、水平方向の中心位置を合わせたい

.text-content { 
 
    cursor: pointer; 
 
    display: table; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.text-content span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: #000; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
}

<span class="text-content"> 
 
    <span>Post Title</span> 
 
</span>