- 締切済み
inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
サンプルなのでそうなのでしょうが、そんなHTML書いたら後々メンテナンスで泣くことになる。HTML5では、安易にDIVは使えない。 ・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する HTML4.01 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ・Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. (著者は他に適切な要素ない時の最後の手段としてdiv要素を使用するよう奨励される。) HTML5 http://www.w3.org/TR/html5/grouping-content.html#the-div-element たとえば、ある新着情報（ニュース）の一覧が、ブロック（section）としてマークアップされているとします。 <section> <h3>新着情報</h3> <p>大阪都構想、５月１７日住民投票へ 府と市の法定協賛成(17:08)</p> <p>建築廃材１０４トンを不法投棄、容疑者を逮捕 鹿児島(19:02)</p> <p>ＪＲ阪和線、天王寺駅―鳳駅で運転見合わせ 列車不具合(18:53)</p> <p>誕生パーティーだった…ベトナム人被告、ヤギ窃盗認める(17:08)</p> <p>ＡＳＫＡ氏知人の栩内被告に有罪判決 覚醒剤事件で地裁(16:34)</p> <p>お茶１杯「９６万円」 上海で日本人ぼったくり被害急増</p> </section> 先刻の朝日新聞社のニュースサイト( http://www.asahi.com/ )より拝借・・ HTML4.01でしたら、 <div class="section" id="news"> <h3>新着情報</h3> <p>大阪都構想、５月１７日住民投票へ 府と市の法定協賛成(17:08)</p> <p>建築廃材１０４トンを不法投棄、容疑者を逮捕 鹿児島(19:02)</p> <p>ＪＲ阪和線、天王寺駅―鳳駅で運転見合わせ 列車不具合(18:53)</p> <p>誕生パーティーだった…ベトナム人被告、ヤギ窃盗認める(17:08)</p> <p>ＡＳＫＡ氏知人の栩内被告に有罪判決 覚醒剤事件で地裁(16:34)</p> <p>お茶１杯「９６万円」 上海で日本人ぼったくり被害急増</p> </div> それに対してスタイルシート書きます。それだけで良い。HTML分かりやすいでしょ。 サンプル ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みHTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.section{ ＿width:700px; ＿height:400px; ＿background:gray; ＿display:table-cell; ＿vertical-align:middle; ＿position:relative; } div.section div#news{ ＿display:block; ＿width:500px; ＿height:auto; ＿min-height: 100px; ＿margin-right:auto; ＿margin-left:auto; ＿background:silver; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<div class="section" id="news"> ＿＿＿<h2>新着情報</h2> ＿＿＿<p>大阪都構想、５月１７日住民投票へ＿府と市の法定協賛成(17:08)</p> ＿＿＿<p>建築廃材１０４トンを不法投棄、容疑者を逮捕＿鹿児島(19:02)</p> ＿＿＿<p>ＪＲ阪和線、天王寺駅―鳳駅で運転見合わせ＿列車不具合(18:53)</p> ＿＿＿<p>誕生パーティーだった…ベトナム人被告、ヤギ窃盗認める(17:08)</p> ＿＿＿<p>段落を増減してみよう・・</p> ＿＿＿<p>ＡＳＫＡ氏知人の栩内被告に有罪判決＿覚醒剤事件で地裁(16:34)</p> ＿＿＿<p>お茶１杯「９６万円」＿上海で日本人ぼったくり被害急増</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
普通、vertical-alignはテーブル要素にたいするオプションなので それ以外の要素に対してはブラウザごとに処理がことなると思います。 構造上許せばテーブルにするのが手っ取り早いと思いますが そうでないなら縦方向のセンタリングは難しいと考えた方がよいでしょう
お礼
勉強になりました。ご回答ありがとうございました。
お礼
具体例まである丁寧なご回答、ありがとうございます。 自分がいかに無知で良くない書き方をしていたのかがよくわかりました。 ご回答頂いたサンプルの場合、div.section div#newsの部分の横幅は固定ですが、 こちらも縦幅と同様内容の大きさに合わせて横幅が変わり、中央揃えにするにはどのように記述すれば良いのでしょうか。 よろしければ、ご教授お願い致します。