東京ウェブ制作ブロマガ

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 (税込)

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事

継続入会すると1ヶ月分が無料です。 条件を読む

東京ウェブ制作チャンネル

東京ウェブ制作チャンネル

月額
¥550  (税込)
このチャンネルの詳細