« PHP 改行コードの統一 | メイン | SSHのポートフォアーディング »
2010年03月25日
2行以上で縦方向中央にCSS
縦方向に中央の場合
<div><p>中央</p></div>
div {
height:300px;;
}
p{
line-height:300px;
}
とすれば一行の場合は対応可能
以下2行の場合 （ぱくり
2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。
(X)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;
}
投稿者 muuming : 2010年03月25日 15:30