【備忘録】cssで上下中央にする方法

これまで使用したcssで上下中央に配置する方法をまとめました。

【1】テキストの場合(1行)

・height と line-height を同値で設定する。

 

【2】positionを使用する方法

・親要素に

position:relative;

height:○○;

を設定します。

・子要素(上下中央にしたい要素)に

position:absolute;

top: 0;

bottom; 0;

margin: auto 0;

を設定します。

以上で上下中央になります。

【おまけ】vertical-align:middle; を使用して揃える場合

・vertical-align プロパティはインライン要素かテーブルセルにしか効きません。

インライン要素は高さが設定できないので、displayでテーブルセルにしてから使用します。

height:○○;

display:table-cell;

vertical-align:middle;

で中央になります。

 

 

 

 

 

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です