CSS Align(配置)
CSS 水平配置 (水平配置)
CSS には、要素の水平方向の配置のためのプロパティがいくつかあります。
ブロック要素の配置
ブロック要素は、全幅を占め、改行で囲まれた要素です。
ブロック要素の例:
<h1>
<p>
<div>
テキストの配置、CSSテキストの章を参照。 .
この章では、レイアウト内でブロック要素を水平方向に整列させる方法を説明します。
マージン属性を使用した中央揃え
ブロック要素は、左右のマージンを「自動」配置に設定できます。
注: !DOCTYPE が宣言されていない限り、IE8 での margin:auto 属性の使用は正しく機能しません。
margin 属性は、左と右のマージン設定に任意に分割でき、結果は中央に配置された要素になります。オンラインで表示 例ヒント:
幅が 100% の場合、位置合わせは効果がありません。注: IE5 にはブロック要素のマージン処理のバグがあります。上記の例を IE5 で動作させるには、いくつかのコードを追加する必要があります。 例 Position 属性を使用して左右の配置を設定します
要素を配置する方法の 1 つは、絶対位置を使用することです:
Example<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>注意: </b>使用 margin:auto无法兼容 IE8, 除非!DOCTYPE已经声明.</p>
</body>
</html>
例を実行する » [例を実行] をクリックしますボタンをクリックしてオンラインの例を表示します
注:
絶対的な配置はドキュメント フローとは関係がないため、ページ上の他の要素をオーバーレイできます。左右の配置を設定するには float 属性を使用します float 属性の使用は、要素を配置する方法の 1 つです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>
サンプルの実行»「インスタンスの実行」ボタンをクリックしますオンラインの例を表示するには インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>
インスタンスを実行しますか?オンラインインスタンスを表示するには、「インスタンスを実行」ボタンをクリックしてください
水平方向と垂直方向の両方で中央揃えにしたい場合は、padding と text-align: center: を使用できます。
水平方向と垂直方向の両方で中央揃えにします。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>インスタンスを実行しますか?
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
line-heightを使用して垂直方向の中央揃えを設定します
私は垂直方向の中央揃えです。例を見てみましょう
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>
<div class="center">
<p>我是水平和垂直都居中的。</p>
</div>
</body>
</html> 位置と変換を使用します 垂直に設定します
さらに、変換を使用することもできます属性を使用して垂直方向のセンタリングを設定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>このように要素を配置するときは、要素のマージンとパディングを事前に決定することをお勧めします。これは、ブラウザーごとに視覚的な違いが生じるのを避けるためです。
IE8 以前では、float 属性を使用するときに問題があります。コンテナ要素 (この場合は <div class="container">) に指定された幅があり、!DOCTYPE 宣言が欠落している場合、IE8 以前のバージョンでは右側に 17 ピクセルのマージンが追加されます。これはスクロール用の予約スペースのようです。 float 属性を使用する場合は、必ず DOCTYPE 宣言で設定してください。
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>
</body>
</html>
