ど素人から毛を生やす。<延>

display:table-cellでwidth:100%に設定したいとき

Web > css 2014年12月5日(最終更新:2年前)

このページは2014.12.5に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
久々の連続更新(゚∀゚)

要素を手っ取り早く上下中央揃えにしたいとき、親要素のdisplayをtable-cellにするのが楽ちん。
でも、display:table-cellはwidth:xx%が効かない罠。

親要素のwidthが決まっている場合、width:inherit;(親の数値を引き継ぐ)でイケる。
まぁ、親要素が決まってるならそのpx書けば良いだけだけど、その変動も考えるとinheritのが堅実。

しかし親要素もパーセンテージ指定だったら…。
width:想定される最大pxより大きな数値;でイケた。ちょっと驚いた。

どうやらtable-cellには親要素を絶対にはみ出ないという原則があるようだ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (1)
  • (・∀・) 参考になった (9)
  • (`・ω・´) 役に立った (14)