[CSS]複数行のテキストを天地左右中央に配置するスタイルシート

サイト構築 -CSS

Post on:2009年5月14日

sponsorsr

複数行のテキストを天地左右中央に配置するスタイルシートをCSS-Tricksから紹介します。

Vertically Center Multi-Lined Text
demo

デモでは、一行、複数行ともに中央に配置されています。

仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。

HTML

<div class="area">
      <div class="bubble">
          <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
      </div>
</div>

CSS

.area {
  width: 300px;
  height: 300px;
  background: url(../images/abe-bg.png) no-repeat;
  position: relative;
}

.bubble {
  position: absolute;
  left: 93px;
  top: 21px;
  width: 135px;
  height: 84px;
  display: table;
}

.bubble p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

対応ブラウザは、IE8では期待通り表示されますが、IE7では天地中央が無効になります。

IE8でのキャプチャ

IE7でのキャプチャ

追記：: IE7および6対応として、expressionを使用したものが追記されました。

<!--&#91;if lt IE 8&#93;>
<style>
.bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; text-align: center;}
.bubble p { position: relative; font-size: 11px;
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
</style>
<!&#91;endif&#93;-->