複数のdivを横並びさせる時一つだけ中央

Question

複数のdivを横並びさせる時一つだけセンタリングする方法はありますか？
widthを狭めてもカラム落ちや片方に寄らせずに
l--口----------l３カラム l--------------l
l---------------l左右可変l--------------l
l-----------------------------------------l
l-----------------------------------------l

margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。

body{
width:1500px;}

#3カラム{margin-left: 0 auto;
margin-right: 0 auto;
width:500px;
～～
}
#左画像{width:100px;
margin-left:10px;
z-index:2;
}

ORUKA1951 · Accepted Answer

＞複数のdivを横並びさせる　これ意味不明です。DIVは「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」であって、デザインのためじゃありません。HTML5では「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )--他に適切な要素がないときの最後の手段として使用すること」となります。　プレゼンテーション(表現)をスタイルシートで行なう最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。そこや、「スタイルシートは・・・HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、・・・その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」書かれているように。　ここ、HTML/スタイルシート書く時に最も重要な根幹に関わる部分です。しっかり読んで復習しておきましょう。　例えば、ナビゲーションリストとして次のようにマークアップされているものとしたら、HTMLには一切手を加えないでスタイルシートで・複数のdivを横並びさせる時一つだけ中央・ウィンドウトップ（または最下段）に固定して横並び・左または右に縦に配置・画像の上にボタン的に配置・ディスプレイ幅に合わせて中央に横並び　など、自由自在にHTMLに頼らずにデザインできます。先でデザインの変更もHTMLには無関係にできますよ。　ちなみにHTML5だと

ページタイトル

さて、ここで「３つのリンクを横並びさせる時一つだけ中央」とデザインしたければ div.nav{ width:100%; min-width:470px;/* スマホ縦置き用 */ max-width:1000px;/* 幅広ディスプレイ用 */ line-height:40px;/* ボタンの高さ */ position:relative;/* 子孫の位置やサイズの基準とする */ margin:0 auto; height:40px; } div.nav ol{ list-style:none;/* リストとは表示しない */ margin:0;padding:0;/* ブラウザのもつスタイルを消す */ } div.nav ol li{ margin:0;paading:0;/* ブラウザのもつスタイルを消す */ top:0;left:0;width:100%;/* div.nav内に */ text-align:left; position:relative; } div.nav ol li+li{ text-align:center;/* 二つ目は中央 */ } div.nav ol li+li+li{ text-align:right;/* 三つ目は中央 */ } div.nav ol li a{ display:inline-block;/* ブロック */ width:25%;min-width:200px;max-width:300px;/* サイズを指定 */ text-align:center; background-color:yellow; position:relative; z-index:100; } div.nav ol li+li a{top:-40px;} div.nav ol li+li+li a{top:-80px;} とHTML見なくても書ける。他にもいろいろ方法はあります。他のデザインも考えて見ましょう。(HTMLは触らず) 　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 全体サンプル ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATAでチェック済みHTML4.01strict+CSS2.1 ★スマホから幅広ディスプレイまで対応　印刷には適用されない(印刷プレビューで確認) ＿＿サンプル＿＿＿＿＿＿＿

＿＿

見出し

＿＿

本文はsection

＿＿

＿＿＿

項見出し

＿＿＿

本文項記事

＿＿＿

sectionの階層でレベルが判断される

＿＿

＿

複数のdivを横並びさせる時一つだけ中央

＞複数のdivを横並びさせる

この回答への補足

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング