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

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

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

cssです。

.danraku{
  border:1px solid;
  display:inline-block;
  width:90px;
  height:50px;
  text-align:center;
  vertical-align:middle;
}

#danraku{
  border:1px solid;
  display:inline-block;
  width:90px;
  height:50px;
  text-align:center;
  vertical-align:middle;
}

サンプル

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

display:inline;に変更する

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

cssです。

.danraku{
  border:1px solid;
  display:inline;
  width:90px;
  height:50px;
  text-align:center;
  vertical-align:middle;
}

#danraku{
  border:1px solid;
  display:inline;
  width:90px;
  height:50px;
  text-align:center;
  vertical-align:middle;
}

サンプル

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

cssです。

.danraku{
  border:1px solid;
  display:table-cell;
  width:90px;
  height:50px;
  text-align:center;
  vertical-align:middle;
}

#danraku{
  border:1px solid;
  display:table-cell;
  width:90px;
  height:50px;
  text-align:center;
  vertical-align:middle;
}

サンプル

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

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

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

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

cssです。

.danraku{
  border:1px solid;
  display:inline-block;
  width:90px;
  text-align:center;
  vertical-align:middle;
}

#danraku{
  border:1px solid;
  display:inline-block;
  width:90px;
  text-align:center;
  vertical-align:middle;
}

サンプル

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

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^