CSSのdisplayプロパティを使用してブロック要素を横に並べる

求人
CSSのdisplayプロパティを使用してブロック要素を横に並べる

divタグにblock:inline-block;を指定して横に並べてみます。

cssです。

サンプル

display:inline-block;だとdiv要素を横並びに並べることはできましたが、vertical-align:middle;が効かないようです。

display:inline;に変更する

divタグを横並びにしながらvertical-align:middle;を効かせるためにdisplay:inline;に変更してみました。

cssです。

サンプル

今度はwidthとheightが効かないです。どうもvertical-alignはブロック要素では適用されないようで、display:table-cell;とすることによってvertical-alignを効かせることができるようです。

cssです。

サンプル

でもレスポンシブデザインにはdisplay:table-cell;は向いていないようです。

display:table-cell;を安易に使うべきでない理由いろいろ

heightを指定している場合、vertical-alignが使用できない

さらに色々調べていると、block:inline-block;でheightを指定しているとvertical-alignが効かないようです。一度heightを外してみます。

cssです。

サンプル

heightを外すと、vertical-alignが効いているのがわかります。

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA