閉じる
閉じる
×
float:leftで横並びにしたdiv全体を中央に配置する
2013-03-30 19:29
●HTML
<div class="c_japan"><p>日本</p>
<div class="c_kantou"><p>関東</p>
<div class="c_tokyo">東京</div>
<div class="c_kanagawa">神奈川</div>
<p>かんとう</p>
</div><!-- end of c_kantou -->
<p>にっぽん</p>
</div><!-- end of c_japan -->
●CSS
.c_japan{
background-color:#FF0000;
width:800px;
margin:auto;
}
.c_kantou{
background-color:#0000FF;
width:600px;
margin:auto;
}
.c_tokyo{
background-color:chartreuse;
width:200px;
float:left;
}
.c_kanagawa{
background-color:lightcoral;
}
●解説
東京と神奈川をfloatで横並びにして、それらを関東で囲み、
かつ、関東にmargin:auto;で中央寄せを適用すると、
横並びにしたdiv全体を中央に配置できる。
サンプルソース
チャンネル会員ならもっと楽しめる！
- 会員限定の新着記事が読み放題！※1
- 動画や生放送などの追加コンテンツが見放題！※2
-
- ※1、入会月以降の記事が対象になります。
- ※2、チャンネルによって、見放題になるコンテンツは異なります。
東京ウェブ制作ブロマガ
更新頻度：
不定期
最終更新日：
チャンネル月額：
¥550
(税込)