inline-blockを上下中央揃えにする方法

締切済

質問者：jiro_00
質問日時：2015/01/13 17:21
回答数：2件

以下の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件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2015/01/13 19:36

　サンプルなのでそうなのでしょうが、そんなHTML書いたら後々メンテナンスで泣くことになる。

HTML5では、安易にDIVは使えない。
・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する
　HTML4.01 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
・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 …

　たとえば、ある新着情報（ニュース）の一覧が、ブロック（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">

＿</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>

- 0
- 件

通報する

この回答へのお礼

具体例まである丁寧なご回答、ありがとうございます。
自分がいかに無知で良くない書き方をしていたのかがよくわかりました。
ご回答頂いたサンプルの場合、div.section div#newsの部分の横幅は固定ですが、
こちらも縦幅と同様内容の大きさに合わせて横幅が変わり、中央揃えにするにはどのように記述すれば良いのでしょうか。
よろしければ、ご教授お願い致します。

通報する

お礼日時：2015/01/13 23:58