ホームページ > 記事 > ウェブフロントエンド > CSSで配置を設定する方法
設定方法: 1.「margin:0px auto」ステートメントを使用して水平方向の配置を設定します; 2.position 属性と top、bottom、left、および right 属性を使用して左または右の配置を設定します。 3. 「float: right|left」ステートメントを使用して、左揃えまたは右揃えを設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
1. margin 属性を使用して要素を水平方向に整列させます
左右のマージンを「自動」に設定することで要素を整列させることができます。ただし、それを表明することが前提です。 DOCTYPE、それ以外の場合は、IE8 では無効です。これにより、要素を中央に配置できます。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
div{
margin: 0px auto;
width: 70%;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ヒント: 幅が 100% の場合、配置は効果がありません。
2. 左揃えと右揃えには、position 属性を使用します
互換性の観点からは、この方法を使用することが間違いなく最良の方法ですが、position 属性を使用する場合は、必ず設定してください! DOCTYPE ステートメント, IE8 以前のバージョンでは問題が発生します。コンテナ要素 (この例では
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
position: relative;
width: 100%;
}
.right{
position: absolute;
right: 0px;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>3. 左揃えと右揃えには float 属性を使用します
IE8 以前のバージョンでは、float 属性を使用するときに問題が発生します。 !DOCTYPE宣言を省略した場合、IE8以前では右に17pxのマージンが追加されます。これはスクロールバー用に予約されているスペースのようです。 float 属性を使用する場合は、常に !DOCTYPE 宣言を設定します。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.right{
float: right;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>
推奨学習: css ビデオ チュートリアル
以上がCSSで配置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。