CSSで垂直中央を実装する【css tips】
CSSで垂直中央を実装する【css tips】 vertical-alignの使い方の続きです。 vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと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; } サンプル positionを使いp要素の開始位置を中央に設定します。 その後にmar
vertical-alignの使い方【css tips】[to-R]
vertical-alignの使い方【css tips】 vertical-alignは正しく理解していないと使いにくいプロパティである。 特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。 テーブルレイアウトでよく使う以下のようなコードがある。 <table width="200" height="200" bgcolor="#39FF6B"> <tr> <td valign="middle" align="center">中央に表示したい文字</td> <tr> </table> サンプル このコードをcssレイアウトに変更する際に HTMLを <div> <p>中央に表示したい文字</p> </div> CSSを div{ width:200px; height:200px; background:#39FF6B; text-align:center; v
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
