CSS 水平揃え
CSSの水平配置（水平配置）
ブロック要素の配置
ブロック要素は、前後に改行が入った全幅を占める要素です。
ブロック要素の例:
<h1>
<p>
<div>
この章では、レイアウトでブロック要素を水平方向に整列させる方法を説明します。
中央揃えでは、margin 屬性
block 要素を使用して、左右のマージンを「自動」配置に設定できます。
注: IE8 での margin:auto 屬性の使用は、!DOCTYPE を宣言しない限り正しく機能しません
margin 屬性は、自動的に指定されるように左と右のマージン設定に任意に分割でき、結果は中央揃えの要素になります。
例
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
} ヒント: 幅が 100% の場合、位置合わせは効果がありません。 注: IE5 にはブロック要素のマージン処理のバグがあります。上記の例を IE5 で動作させるには、いくつかのコードを追加する必要があります。 クロスブラウザ互換性の問題
<pこのように要素を配置する場合、要素のマージンとパディングを事前に決定することをお勧めします。これは、ブラウザーごとに視覚的な違いが生じるのを避けるためです。 IE8 以前では、position 屬性を使用するときに問題があります。コンテナ要素 (この場合は <div class="container">) に指定された幅があり、!DOCTYPE 宣言が欠落している場合、IE8 以前のバージョンでは右側に 17 ピクセルのマージンが追加されます。これはスクロール用の予約スペースのようです。 Position 屬性を使用する場合は、必ず DOCTYPE 宣言で設定してください。 左右の配置を設定するには float 屬性を使用します float 屬性の使用は、要素を配置する方法の 1 つです: 例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到達了的地方，都屬于昨天。哪怕那山再青，那水再秀，那風再溫柔。帶深的流連便成了一種羈絆，絆住的不僅是雙腳，還有未來。</p>
<p>怎麼能不喜歡出發(fā)呢？沒見過大山的巍峨，真是遺憾；見了大山的巍峨沒見過大海的浩翰，仍然是遺憾；
見了大海的浩翰沒見過大漠的廣袤，依舊遺憾；見了大漠的廣袤沒見過森林的神秘，還是遺憾。世界上有不絕的風景，我有不老的心情。</p>
</div>
</body>
</html>クロスブラウザ互換性の問題このように要素を配置する場合、要素のマージンとパディングを事前に決定します要素、常に良いアイデアです。これは、ブラウザーごとに視覚的な違いが生じるのを避けるためです。 IE8 以前では、float 屬性を使用するときに問題があります。コンテナ要素 (この場合は <div class="container">) に指定された幅があり、!DOCTYPE 宣言が欠落している場合、IE8 以前のバージョンでは右側に 17 ピクセルのマージンが追加されます。これはスクロール用の予約スペースのようです。 float 屬性を使用する場合は、必ず DOCTYPE 宣言で設定してください。 インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>當使用浮動屬性對齊,總是包括!DOCTYPE聲明!如果丟失,它將會在IE瀏覽器產(chǎn)生奇怪的結果。</p>
</div>
</body>
</html>
