こんにちは。
ユニトピの人気記事、実は…
【CSS】vertical-alignが効かない時はこれを試す | unitopi – ユニトピ –
なんです。
たしかに配置の問題って、text-alignなのか、marginで左右Autoなのか、なかなかうまく行かないことがありますよね。そこで今回は、様々な状況に応じたサンプルをご用意しました。
Divを中央(左右)に表示したい1
横幅がわからない(決まっていない)場合
.parent{
text-align: center;
}
.target{
display: inline-block;
}
Divを中央(左右)に表示したい2
横幅が確定している場合
.parent{
}
.target{
width: 50px;
margin: 0 auto;
}
Divを中央(上下)に表示したい
.parent{
height: 200px;
display: table-cell;
vertical-align: middle;
}
.target{
}
Listを横並びにして、中央に表示したい
.parent{
text-align: center;
}
ul{
display: inline-block;
}
ul > li{
float: left;
}
全サンプルの表示例
※ 明示的に色をつけたり、MarginやPaddingの調整等も行っています
See the Pen vEbQRz by Tsukasa Nagata (@nt-uni) on CodePen.0
まとめ
いかがでしたか?
振り返ってみると、その要素がインライン要素なのかブロック要素なのか(インラインブロックやテーブルセルなどもあります)が重要となってきています。というのも、margin:0 auto;
はブロック要素かつwidth
が決まっているものに効き、text-align
はインライン要素に効くなどの違いがあるためです。
この辺りの違いを理解しておくと、上下左右どこでも配置できるようになるはずです!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事