デザイン上の表現ではよく使われるのに
CSSでの再現は意外と難しいボックス内での上下中央揃え。

ボックス要素(block要素)には上下中央揃えの指定は無く、
vartical-alignも効きません。

そういった場合の時は、
上下のpaddingで何とか調整をしたり、
諦めてテーブルで再現したり
悩みどころだったりするのですが、
いちよCSSでも再現する方法はあります。

「display:table-cell」を使用する方法。

ボックス要素とする<div>に対してdisplayをtable-cellにすることで、
vartical-alignの効果を発生させるもの。

ですが、IEではこの「display:table-cell」はサポートされていないので、
IEのみ「display:inline」の指定をします。

まずは再現したサンプルについて。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

実際のHTMLソース&CSSは以下の通り。

=== ココカラ ========================================
<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS BOX 上下中央揃え</title>
<meta http-equiv=”content-style-type” content=”text/css” />
<style type=”text/css”>
* {
  margin: 0;
  padding: 0;
}

#container {
  width: 400px;
  font-size: 12px;
  line-height: 180%;
}

#container div {
  width: 200px;
  display: table-cell;
  vertical-align: middle;
}

* html #container div {
  display: inline;
  zoom: 1;
}

*:first-child+html #container div {
  display: inline;
  zoom: 1;
}

</style>
</head>

<body>

<div id=”container”>

<div><img src=”img/cat.jpg” alt=”" width=”200″ height=”150″ /></div>
<div>画像に対してテキスト上下中央揃え。<br />画像に対してテキスト上下中央揃え。</div>

</div><!–/container–>

</body>
</html>
=== ココマデ ========================================

画像とテキストがくっついてしまっていますが
<div>にクラスを付けることでそれぞれ幅の指定を変えたり
margin、paddingを指定することも可能です。

この方法だとボックスの上下中央揃えは、ほぼどのブラウザでも大丈夫ですが、
ハックを使うあたりで何だかあまり綺麗な指定とは思えず何か納得いかず…

何か他にいい方法を知っている方、情報をお願いしますデス。

※ちなみにボックス要素の中に入るテキストが一行のみの場合は
CSSにて、そのボックスの高さ(height)と行間(line-height)の値を
同じにすることで上下中央揃えは実現できます。
———————–
div {
  height: 100px;
  line-height: 100px;
}
———————–
こんな感じに。

以上、ご参考までに。。。

参考サイト:ヨモツネット

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSSでボックス内の上下中央揃えを実現するには…

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner