css - CSS テーブルを使用したテキストの垂直方向の配置が機能しない

Question

CSS テーブルを使用して div 内のテキストを垂直方向に揃えようとしましたが、何らかの理由で機能しません。

<div class="navlink" style="width:150px; display:table;">
<div style="text-align:center; display:table-cell; vertical-align:middle;">Some Text</div>
</div>

このコードを機能させる方法について何か提案はありますか?

Answer 1

高さの代わりにテーブルの幅を入れるだけです。

<div class="navlink" style="width:150px; display:table;">

---><div class="navlink" style="height:150px; display:table;">

Answer 2

それは機能します。セルdivに高さを使用していないだけなので、このようにします

デモ

<div class="navlink" style="width:150px; display:table;">
   <div style="text-align:center; display:table-cell; height: 200px; vertical-align:middle;">Some Text</div>
</div>

Answer 3

これは私が見つけた最良の答えです: http://phrogz.net/css/vertical-align/index.html

これはたくさん出てきます。簡単な答えはありません。

ページからの引用：

私が支援しているさまざまな IRC チャネルの FAQ は、「この領域内でコンテンツを垂直方向に中央揃えするにはどうすればよいですか?」です。この質問の後には、「vertical-align:middle を使用していますが、機能していません!」という質問が続くことがよくあります。

ここでの問題は 3 つあります。

従来、HTML レイアウトは垂直方向の動作を指定するように設計されていませんでした。その性質上、幅方向にスケーリングされ、コンテンツは使用可能な幅に基づいて適切な高さに流れます。伝統的に、水平方向のサイジングとレイアウトは簡単です。縦方向のサイジングとレイアウトはそこから導き出されました。

B vertical-align:middle が意図したとおりに動作しない理由は、作成者が何をすべきかを理解していないためですが…</p>

C … これは、CSS 仕様が (私の意見では) これを本当に台無しにしたためです。vertical-align は、使用される場所に応じて 2 つのまったく異なる動作を指定するために使用されます。

この記事では、2 つの基本的な方法があることを説明しています。絶対配置と、他の回答の行の高さの方法です。