HTML　と　CSS　のまとめ - ruhachiimekaのブログ

divタグの縦中央揃えのやり方

line-height を使う場合・・・

　親要素に、height を指定する。そして、子要素にline-height:親と同じ値　

　を指定すれば、子要素は真ん中に配置される。

これが二行になった場合は・・・

　親にposition:relative　を指定して

　子にposition:absolute　を指定し、

　top:50% transform:translaty(-50%)

を入れると、二行の塊が真ん中に配置される。

vertical-align を使う場合・・・

これはtableセルか、インライン要素にする。

そこでdivタグにしたい場合は、display:tabel-cell として、（そこで必ず高さも指定する。）vaertical-align:middle にすることで、divタグでも真ん中に配置される。

（display:block はvertical-alignプロパティの適応外）

横方向のtext-align を使う場合・・・

子要素となることの多い　Pタグなどはブロック要素であるゆえに、親要素にdisplay:block 　text-alignを指定したところで中央揃えにはならない。

どうするかというと↓

一つに、display:block →　inline-block指定　→　text-align を使うことができる。

もう一つは、margin を用いて中央になるように調整するという方法もある。

（ブロック要素には　margin:auto を使える。）

詳細度を示す　＞　について・・・

これは　例えば、　htmlで　　<div>

　　　　　　　　　　　 <div>

　　　　　 </div>

というものがあった場合、cssで　　.div > p　と指定されればこれは、親要素の直接の子供である<p>おやすみ</p>が選ばれていることになる。

(　要素の直下の階層にある要素にスタイルを適用することを意味しているから。）

この山カッコのおかげで、詳細度を上げることができ、他のプロパティから強い影響を受けていても勝つことができる。

※　transform:translaty →　

　セレクタ名 { transform:translate(X軸方向の移動距離,Y軸方向の移動距離); }

　この記事のtransformプロパティの使い方であれば、縦に-50%の位置に表示される

　ようになる。