CSSレイアウト - 水平方向と垂直方向の位置合わせ
要素を水平および垂直方向に中央揃え
要素を中央揃え
ブロック要素(<div>など)を水平方向に中央揃えするには、次を使用します。 margin: auto;
要素の幅を設定すると、要素がコンテナの端まで伸びなくなります。
要素は指定された幅を取り、残りのスペースは2つのマージン間で均等に分割されます。
このdiv要素は中央揃えです。
注意：widthプロパティが設定されていない (または 100% に設定されている) 場合、中央揃えは効果がありません。
テキストを中央揃え
要素内のテキストを中央に配置するには、次を使用します。 text-align: center;
このテキストは中央揃えです。
ヒント：テキストを揃える方法の例については、CSSテキストの章を参照してください。
画像を中央に配置
画像を中央に配置するには、左右のマージンをautoに設定し、block要素にします。
左揃えと右揃え - 位置の使用
要素を整列させる1つの方法は、次を使用することです。 position: absolute;
若くて傷つきやすい年に、父は私にアドバイスをくれました。
例
注意：絶対配置要素は通常のフローから削除され、要素をオーバーラップさせることができます。
左揃えと右揃え - float の使用
要素を整列させるもう 1 つの方法は、floatプロパティを使用することです。
clearfixのハック
注意：要素がそれを含む要素よりも高く、フロートされている場合、コンテナーの外にオーバーフローします。「clearfixハック」を使用してこれを修正できます (以下の例を参照)。
clearfixなし
clearfix付き
次に、含まれる要素にclearfixハックを追加して、この問題を修正します。
垂直方向に中央揃え - パディングを使用
CSSで要素を垂直方向に中央揃えする方法は多数あります。簡単な解決策は、上下のpaddingを使用することです。
私は垂直方向の中心にいます。
垂直方向と水平方向の両方の中央に配置するには、paddingとtext-align: centerを使用します。
私は垂直方向と水平方向の中心にいます。
垂直方向に中央揃え - line-heightを使用
もう1つのトリックは、heightプロパティと等しい値でline-heightプロパティを使用することです。
私は垂直方向と水平方向の中心にいます。
例
垂直方向に中央揃え - 位置と変換を使用
paddingとline-heightが解決策のオプションでない場合、別の解決策は、位置とtransformプロパティを使用することです。
私は垂直方向と水平方向の中心にいます。
例
垂直方向に中央揃え - フレックスボックスを使用
フレックスボックスを使用して対象を中央に配置することもできます。IE10以前のバージョンではフレックスボックスがサポートされていないことに注意してください。
例
ヒント：フレックスボックスについては、CSSフレックスボックスの章の章で詳しく説明します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。