Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8925

【CSS】要素の中央寄せ【備忘録】

$
0
0

中央寄せしなければならない時に、毎回調べてるので備忘録

ブロック要素

sample.css
/* 色、幅、高さの記述は省略 */.contentA{/* 親要素 */display:flex;align-items:center;}.contentB{/* 子要素 */margin:0auto;}
sample.html
<body><divclass="contentA"><divclass="contentB"></div></div></body>

実行結果(赤が親要素、青が子要素)

スクリーンショット 2020-02-04 22.22.28.png

インライン要素

インライン要素をdivで囲ってあげる

sample.css
/* 色、幅、高さの記述は省略 */.contentA{/* 親要素 */display:flex;align-items:center;}.contentB{/* 子要素 */margin:0auto;}/* ボタンの位置設定は特になし */
sample.html
<body><divclass="contentA"><divclass="contentB"><inputtype="button"value="テストボタン"></div></div></body>

実行結果(赤が親要素、青が子要素(ボタン))

スクリーンショット 2020-02-04 23.11.37.png


Viewing all articles
Browse latest Browse all 8925

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>