CSS の配置

CSS 水平方向の配置 (水平方向の配置)

CSS には、要素の水平方向の配置のためのプロパティがいくつかあります。

ブロック要素の配置

ブロック要素は、全幅を占め、改行で囲まれた要素です。ブロック要素の例：

マージン属性を使用した中央揃え

ブロック要素は、左右のマージンを「自動」配置に設定できます。 margin 属性は、左と右のマージン設定に任意に分割でき、自動的に指定されます。結果は要素が中央に配置されます:

      <!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>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</body>
</html>

ヒント: 幅が 100% の場合、配置はありません。の効果。

プログラムを実行して試してみましょう

position属性を使用して左右の配置を設定します

要素を配置する方法の1つは、絶対配置を使用することです:

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        .right
        {
            position:absolute;
            right:0px;
            width:300px;
            background-color: #4ce667;
        }
    </style>
</head>

<body>
<div class="right">
    <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>

注

: 絶対配置ドキュメントフローとは何の関係もないため、ページ上の他の要素をオーバーレイできます。

プログラムを実行して試してください

float 属性を使用して左右の配置を設定します

float 属性を使用することは、要素を配置する方法の 1 つです:

      <!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>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>

プログラムを実行して試してください

学び続ける

新しいファイル

<!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>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</p> <p>青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p> </div> </body> </html>

提出するリセットコード

自動運転