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(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント