- ベストアンサー
HTMLで可変長要素を中央寄せする方法は？
- 可変長の要素があって、その中は左寄せのまま、中央寄せにする方法を教えてください。
- テーブルを使わずに可変長要素を中央寄せする方法はありますか？
- display:inline-blockを使って中央寄せを試しましたが、「行間」の設定が困難でした。他の方法があれば教えてください。
- hidhidssisz
- お礼率0% (0/2)
- CSS
- 回答数2
- ありがとう数15
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
それはできないのです。（無理やりは可能でしょうが) 理由は ・並列した要素は互いに他に属していないために、他の要素の子孫足りえない。 あなたのあげられたサンプルでいうと、三行目の新たな要素の巾が３つの要素の巾を決定したとしても、他の要素がそれを参照できることはない。 ※無理やりなら可能です。 display:table,display:table-rowを指定してもダメです。 三番目の要素がもっとも長いと分かっていれば、それを元に親要素の巾を決定し、他の要素はその親要素の子孫としてabsoluteないしrelativeで指定する。 理由はお気づきのようにtableは、その描画方法が特殊だからです。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートを利用する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。【デザインのためにHTMLは書かないということ】 divのclass名は【文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )】だということ。 ＞「行間」の設定が困難でこれではだめでした。 行間と行高さを区別しましょう。 HTMLでは段落が変わるところは必ず<p></p>です。Mbr>は通常はまったく使わないはずです。brは「forced line break」強制改行ですから、「一つの段落でありながら改行する」、HTML5だと『br 要素は、詩や住所のように、改行自体がコンテンツの一部をなすような改行に対してのみに使わなければなりません。br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.』 段落間のマージンが行間になります。 <br>で強制改行されたときは、行高さ-文字高さがテキスト間にあきます。 ★class名は文書構造を示すものに、inerとかouterなんて使わない。 ★必ず基点セレクタを書くようにしましょう。 .innerはCSS1の時代の名残で、一応解釈はしてくれるけど。div.innerとか*.innerとか・・ http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#pattern-matching でも基本は、タイプセレクタですよ。 <body> <div class="header"> <h1>サンプル</h1> </div> <div class"section"> <h2>本文</h2> <div class="section"> <h3>項目見出し</h3> <p> widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。 </p> <p> 次のようにテーブルを使えばできたのですが、テーブルを使わずにやることはできますか？ </p> <p> display:inline-blockを使っても中央寄せにはなりますが、「行間」の設定が困難でこれではだめでした。（１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる） </p> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> において、 html,body{margin:0;padding:0;} body{background-color:gray;line-height:1.6em;} p{margin:0;text-indent:1em;} div.header,div.section,div.footer{ width:50%;/* ボックス中央寄せ */ margin:0 auto; padding:5px; } div.section div.section{ width:auto; margin:0 100px; } div.header{background-color:aqua;} div.section{background-color:silver;} div.footer{background-color:lime;} div.section div.section{background-color:white;} ちなみにHTML5だと <body> <header> <h1>サンプル</h1> </header> <section> <h2>本文</h2> <section> <h3>項目見出し</h3> <p> widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。 </p> <p> 次のようにテーブルを使えばできたのですが、テーブルを使わずにやることはできますか？ </p> <p> display:inline-blockを使っても中央寄せにはなりますが、「行間」の設定が困難でこれではだめでした。（１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる） </p> </section> </section> <footer> <h2>文書情報</h2> </footer> </body> html,body{margin:0;padding:0;} body{background-color:gray;line-height:1.6em;} p{margin:0;text-indent:1em;} header,section,footer{ width:50%;/* ボックス中央寄せ */ margin:0 auto; padding:5px; } section section{ width:auto; margin:0 100px; } header{background-color:aqua;} section{background-color:silver;} footer{background-color:lime;} section section{background-color:white;}
補足
ありがとうございます。 section section{ width:auto; margin:0 100px; } これだと、「子ボックス」のwidthは明示的には指定していませんが、「親要素のwidth-左margin100px-右margin100px」となり、親要素のwidthに対して常に固定幅ですよね。 私がやりたかったことは、「子ボックス」の文字数に応じて、「子ボックス」のwidthを可変にしたいということでした。 分かりやすく例えると親ボックスが「20文字」の幅を持っているて、子要素のテキストが短いもの（「ああ」と「いいいい」）の場合、 教えて頂いたものだと次のようになると思います。 （「マ」はマージン） 親親親親親親親親親親親親親親親親親親親親 ママああ ママ ママいいいい ママ そうではなくて、この場合子要素のテキストの最長の「いいいい」の長さで中央寄せになるようにしたいのです。 親親親親親親親親親親親親親親親親親親親親 ママママママママああ ママママママママ ママママママママいいいいママママママママ 子要素のテキストが長くなればそれによって次のようになる 親親親親親親親親親親親親親親親親親親親親 ママママママああ ママママママママ ママママママいいいい ママママママママ ママママママううううううママママママママ 始めに質問したとおりテーブルを使えばこのようにできたのですが、 テーブルを使わずに、ORUKA1951様のような綺麗なhtmlで書くことは可能でしょうか。