text-alignというプロパティはよく使わていますが、vertical-alignを知っていますか？
text-alignがテキストを横方向の左右真ん中の位置を指定するプロパティなのに対して、vertical-alignは縦方向の位置を指定するプロパティです。
ですが、このvertical-alignにはルールがあり、このルールを守っていないとうまくデザインが適用されません。今回は、vertical-alignが効いていない場合の対処法をご紹介します。
vertial-alignはブロック要素には使えない
vertical-align: middleはブロック要素には適用されません。使えるのは、テーブルセルとインライン要素のみと決まっています。
ですから、div要素には使えません。
対処法
それでも、div要素内で縦方向の位置を指定したい場合には、ブロック要素をインライン要素やテーブルセルに変えてしまう方法があります。
しかし、インライン要素に変換した場合は、高さや幅の変更が効かない為テーブルセルに変更するのが一般的です。display: table-cellを追加して、ブロック要素をテールブセルにした場合、テーブルセルはデフォルトだと幅がテキストの幅になります。
テーブルセルに変換する方法を試しても、思い通りの結果が得られない場合は、marginを試して見る方法もあります。いずれかの方法を試してみて自分やデザインにあったものを利用してください。
