divで縦のセンタ[複数行OK]

以前、divで縦のセンタリングでも書いたが、以前のものは複数行の場合は崩れてしまうものでした。

今回のものは、難しいけど複数行もOKらしい。

HTMLソース

<div>
 <p>中央に表示<br />したい文字</p>
</div>


CSS

div{
 width:200px;
 height:200px;
 background:#39FF6B;
 position:relative;
}
p{
 position:absolute;
 top:50%;
 left:50%;
 margin-left:-2.5em;
 margin-top:-1em;
}


positionを使いp要素の開始位置を中央に設定します。

その後にmarginを使いp要素の中央とdiv要素の中央が同じ位置になるように変更します。

ポイントとしてはp要素のmargin-leftの-2.5emとmargin-topの-1em

margin-leftには行の最大文字数の半分を-であたえます。(今回の場合は5文字/2)
margin-topには行数の半分を-であたえます。(今回の場合は2行/2)


元ネタはコチラ
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事