CSS：divのテキストを垂直に配置するにはどうすればよいですか？ （またはテーブルではない他の要素）

Question

テーブルセル内のテキストを垂直方向に配置するには、にvertical-align: middleを使用します。

しかし、上記はdiv、スパン、ヘッダーおよびその他の非テーブル要素では機能しません。だから、どうやってそのような要素にテキストを整列させることができますか？

Answer 1

多くの可能性があり、それぞれに利点と欠点があります。

ダグラス・ヘリオット（Douglas Heriot）のgood articleが5つの方法を説明し、それらを比較しています。

Answer 2

ただ、以下のスタイルを使用します。その方法

<style type="text/css"> 
    div { 
      vertical-align: middle; 
      display: table-cell; 
     } 
</style> 

を、あなたは、テーブルのセルとしてdivを「表示」されており、表セルとvertical-align作品以来、あなたはテキストが中央に垂直になりますね整列した。

Answer 3

1行のテキストの場合は、行の高さを要素と同じ高さに設定できます。