CSS Alignment(元素对齐)

CSSには、ウェブページの要素をアライメントするために使用できるいくつかの属性があります。

文字アライメント

正しい設定を行うことで、テキストアライメント、を使用してアライメントブロックレベル要素内のテキスト。

h1　{
　　　　text-align:　center;
}
p　{
　　　　text-align:　left;
}

以下を参照してください：CSS Textチュートリアルを参照して、テキストフォーマットに関する情報をさらに詳しく知りたい場合は、以下を参照してください。

margin属性を使用して中心アライメント

ブロックレベル要素の中心アライメントは、CSSのmargin属性の最も重要な意味の1つです。例えば、左右のマージンをautoに設定することで、<div>コンテナを水平に中央にアライメントできます。

div　{
　　　　width:　50%;
　　　　margin:　0　auto;
}

上記の例のスタイルルールは、要素を水平に中央にアライメントします。

position属性を使用して要素をアライメント

CSS positionleft、right、top、bottom属性と組み合わせて使用すると、要素がドキュメントの視口に対してアライメントしたり、親要素を含むようにすることができます。

.up　{
　　　　position:　absolute;
　　　　top:　0;
}
.down　{
　　　　position:　absolute;
　　　　bottom:　0;
}

定位要素に関する情報をさらに詳しく知りたい場合は、以下を参照してください：CSS定位チュートリアル。

フロート属性を使用して左右アライメント

CSSのfloat属性は、左側や右側にアライメントするコンテナ内の要素をそのようにアライメントし、他の内容がその側に流れるようにするために使用できます。

したがって、要素が左側にフロートすると、内容はその右側に流れます。逆に、要素が右側にフロートすると、内容はその左側に流れます。

div　{
　　　　width:　200px;
　　　　float:　left;
}

フロートのクリアリング

フロートベースのレイアウトを使用する際に最も混乱する点の1つは、折り畳みされる親要素です。親要素は、自動的に拡張してフロート要素を収容しません。しかし、親要素に視覚的に認識できる背景や枠線が含まれていない場合、これは常に明らかではありませんが、奇妙なレイアウトやブラウザ間の問題を避けるために注意を払い、処理をすることが重要です。以下の図を参照してください：

あなたは見つけるでしょう

要素は、浮動画像を収容するために自動的に伸びません。この問題を解決するために、コンテナ内の浮動要素の後に、コンテナ要素の閉じタグの前にクリアリングフロートを使用することができます。

折り畳み親要素の修正

CSS折り畳み親要素問題を解決するためのいくつかの方法があります。次のセクションでは、これらの解決策とリアルタイムの例を紹介します。

解決策1：浮動コンテナ

この問題を解決する最も簡単な方法は、浮動を含む親要素を浮動させることです。

.container　{
　　　　float:　left;
　　　　background:　#f2f2f2;
}

解決策2：空のDivを使用して

これは古い方法ですが、すべてのブラウザで使用できるシンプルな解決策です。

.clearfix　{
　　　　clear:　both;
}
/*　html　code　snippet　*/

あなたはタグを通じてこの操作も行うことができます。しかし、これは非シマンティックなコードをマークアップに追加するため、推奨されません。

解決策3：after擬似要素を使用して

この:after 擬似要素連合content財産は、浮動計算の問題を解決するために広く使用されています。

.clearfix:after　{
　　　　content:　".";
　　　　display:　block;
　　　　height:　0;
　　　　clear:　both;
　　　　visibility:　hidden;
}

このクラス.clearfixは、浮動子要素を持つどんなコンテナにも適用できます。