概要

たとえば、アンカー要素を親のブロック要素に張り付けたり、ブロック化したリストアイテムに張り付けるような場合を想定。

親要素全面への貼り付けは、ブロック要素かインラインブロック要素がよさそうなので、それらで縦センタリングを試してみる。

試行結果

概要

以下の試行では、ブロックの親要素に対してブロック、インラインブロックの子要素を前面に貼り付けて、そのテキストを横方向と縦方向にセンタリングしている。

考え方は以下の通り。

• 親要素で
  • widthとheightを指定
  • heightと同じ値でline-heightを指定
• 子要素で
  • widthとheightを100%として親要素の全面に貼り付け
  • text-align: center;で水平方向にセンタリング
  • vertical-align: middle;で垂直方向にセンタリング

親要素でline-heightを設定する意味は以下の通り。

• デフォルトでは、親要素がブロックでもその中の行については行の高さが設定されている
• 子要素が親要素のwidthとheightに合わせて展開しても、その中の行の高さは追随して変わらない
• 親要素の行の高さを要素の高さと同じにすることで、子要素の行の高さも広がり、その中で縦センタリングされるようになる。

なお、子要素でline-height: 100%;としてもうまくいかない。これは、line-heightプロパティーが継承する値が親要素の行高さであって、親要素自体の高さではないためと思われる。

HTMLファイル

CSSファイル

結果

Chromeで表示させた結果、block、inline-blockとも縦横両方向でセンタリングされている。

改良

これまでの方法では、親要素でline-heightを設定するために、親要素の高さと同じ値を2度CSSに書かなければならなかった。これはメンテナンス上煩雑で、ミスも生じやすい。

カスタムプロパティーを使うと、変数に値を代入して使うように、同じ値を再利用できる。

以下は、上で使ったのCSSのparent_blockの部分で、heightとline-heightに同じカスタムプロパティーを参照させている。