配置変更ツイート以前書いた「2つ、3つ以上のテーブルを並べて中央に寄せるHTML&CSSコンビネーション」のブロック要素版というか、<div>タグはもちろん、<ul>タグでも<dl>タグでもできるんだ!と思ったので、改めてメモしていきます。デモは、いつもと同じく、記事の最後の方にあります。他のブロック要素も並べて中央寄せできるHTMLCSSデモあとがきとりあえず1つのブロック要素を中央寄せしてみるブロック要素ができるという事で、あえて<p>タグを使ってみました。・しっかりと幅(width)を指定する・左右の余白をautoで指定するというところでしょうか。今回は<p>タグを使いましたが、もちろん<div>タグに書きかえて使うこともできます。2つのブロック要素を並べて中央寄せにします今回の本題です。left;}親divでボックスを作って中央寄せにして、その中で子divを並べています。div入れ子というやつですね。中央寄せにするときの親にするブロック要素には<div>タグや<section>タグなどを使いましょう。・左右の余白を指定します。・2つの子divにfloatを指定すること・幅を親divの幅の範囲内で設定することにあります。250px」となります。各子divに左右の余白や左右の線などを設定した場合には、その値も合計に入れましょう。合計が親divの幅を超えないように注意します。子divを中央に寄せないとしても、例えば7:3などの割合でレイアウトするときも基本は同じです。ブログのレイアウトとかで見る、2カラムレイアウトなどは、このような土台でコーディングされています。他のブロック要素も並べて中央寄せできるおまけという感じで、<ul>タグや<table>タグのブロック要素でやってみました。さら~っと見ていただければと思いますので、説明は割愛します。基本的には、<div>タグの時と一緒です。あとは、CSSの装飾系のコードで余計な余白とかをリセットしているという感じです。padding:0;}デモデモでは、CSSに装飾系のコードが入っているので、説明してきた内容と若干相違があります。CodePen.あとがき今回は、2つのブロック要素で説明してきましたが、3つのブロック要素の場合でも基本は同じ親divの幅を超えないことです。レスポンシブサイトが主流となってきていますが、その場合には相対値(%)で指定する必要があります。その話は、またいづれ・・・。Webサイトを作るときに、どうしてもこのタグで並べて中央寄せにしたいとか、この配置じゃなきゃダメなんだ等々、皆さんのよりセマンティックな構成のお役に立てれたら嬉しいです。追記】HTML4.01では「ブロック要素」、HTML5では「フロー・コンテンツ」というそうです。「アクセスが拒否されました。webfeelfreeTop。