CSS水平配向(水平位置合わせ)
CSSでは、水平方向の整列要素のためのいくつかのプロパティがあります。
ブロック要素を合わせます
ブロック要素は、改行をフロントとリアの全幅をしている取って、要素です。
ブロック要素の例:
- <H1>
- <P>
- <DIV>
テキストの配置は、参照CSSテキストセクションを。 。
この章では、レイアウトエレメントの水平方向の配置をブロックする方法を紹介します。
センターアラインマージンプロパティを使用して、
ブロック要素は、左右の余白が「自動」配向に設定することができます。
注:IE8の余白に使用します:autoプロパティが動作しない、と宣言DOCTYPEない限り!
マージン特性を任意に左右の余白の設定が自動的に割り当てられ、その結果、中間要素の登場ですに分割することができます。
ヒント:幅が100%である場合、アライメントは有効ではありません。
注意:IE5を処理ブロック要素BUGに余裕があります。IE5で作業上記の例を作るために、我々はいくつかのコードを追加する必要があります。 例
positionプロパティを使用すると、左、右が揃えに設定されています
一つの要素の配置は絶対配置を使用することです。
注意:絶対位置は、文書の流れとは何の関係もありませんので、ページ上の他の要素をカバーすることができます。
Crossbrowser互換性の問題
<P類似したときにそのような要素を揃え、所定のマージンとパディング要素は常に良い考えです。 これは、異なるブラウザで視覚的な違いを避けるためです。positionプロパティを使用しているときIE8およびそれ以前は問題を抱えています。 (この場合の<divクラス= "コンテナ">)コンテナ要素指定された幅が,! DOCTYPE宣言が欠落している場合、IE8およびそれ以前のバージョンでは、右に17pxの余白を追加します。 これは、ローリング・リザーブスペースのようです。 positionプロパティを使用する場合は、必ずDOCTYPE宣言に設定されています!
例
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
»をお試しください
左にフロートプロパティを使用して、右のアラインド
float型プロパティを使用すると、整列要素法の一つであります:
Crossbrowser互換性の問題
このように整列された要素は、予め定められたマージンとパディング要素は常に良い考えです。 これは、異なるブラウザで視覚的な違いを避けるためです。
float型プロパティを使用しているときIE8およびそれ以前は問題を抱えています。 (この場合の<divクラス= "コンテナ">)コンテナ要素指定された幅が,! DOCTYPE宣言が欠落している場合、IE8およびそれ以前のバージョンでは、右に17pxの余白を追加します。 これは、ローリング・リザーブスペースのようです。 フロートプロパティを使用する場合は、必ずDOCTYPE宣言に設定されています!
例
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
»をお試しください