2008年4月24日木曜日

 

【CSS】テキストや画像を中央に表示する


<div>
  <p>中央に表示</p>
</div>

テキスト1行~ line-height を使った方法~


div{
    width:200px;
    height:200px;
    background:#39FF6B;
    text-align:center;
}
p{
   line-height:200px;
}

そのまんま、親要素のサイズで「line-height」を指定。

テキスト1行~ vertical-align を使った方法(IE 以外)~


div{
    display:table-cell;
    width:200px;
    height:200px;
    background:#39FF6B;
    text-align:center;
    vertical-align:middle;
}

vertical-align:middle」はテーブルセルに有効なスタイルなので普通にブロック要素とかに指定しても意味が無い。

テキスト複数行


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

それぞれ行数と列数の半分を「-(マイナス)」でマージン指定。

画像の場合


<div>
  <p><img src="img.jpg" width="100" height="100" alt="中央に表示" /></p>
</div>

上記の複数行のスタイルを、画像の幅と高さの半分にマージンを変更するだけ。


    margin-left:-50px;
    margin-top:-50px;

テキスト複数行~ vertical-align と CSS ハックを使った場合~


div p {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}
/*  for IE6  */
* html div p {
    display: inline;
    zoom: 1;
}
/*  for IE7  */
*:first-child+html div p {
    display: inline;
    zoom: 1;
}
/* Mac 版 IE 5.2  */
/*\*//*/
* html div{
display:inline-block;
}
/**/

ハックしまくりですが Firefox 1, 2、Netscape 6, 7.1、Safari 2, 3、Opera 9.2、IE 5.01, 5.5, 6, 7 とほぼ完璧な対応。

参考

vertical-alignの使い方【css tips】
CSSで垂直中央を実装する【css tips】 -
CSS で簡単に上下中央揃えを実現する - ヨモツネット[日記]

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google