ホームページ  >  記事  >  ウェブフロントエンド  >  DIV のセンタリングを実現する 3 つの CSS メソッド

DIV のセンタリングを実現する 3 つの CSS メソッド

小云云
小云云オリジナル
2018-02-02 11:16:342596ブラウズ

この記事では、CSS で p センタリングを実現する方法を主に説明します。CSS コードはシンプルで理解しやすく、参考になると思います。

p センタリングの実装コードを共有します。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
        </style>
        <p class="p1">
            <p class="p2">
            </p>
        </p>

    </body>
</html>

上記の 2 つの ps では、p2 が p1 の中央に表示されます

方法 1

マージンを使用します。 p1 幅から p2 の幅を引いた値が p2margin-left の値になります: (100-40)/2=30

p1 の高さから p2 の高さを引いた値が p2margin-top の値になります: (100-40)/ 2=30

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}

            .p22{
                margin-left: 30px;margin-top: 30px;
            }
        </style>
        <p class="p1">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

2. 方法2

cssのposition属性を使用して、p1を基準としたp2の上と左を50%に設定し、margin-topを使用してそのマイナス半分に設定します。 p2 の高さを元に戻すには、Marg-left を幅の負の半分に設定して元に戻します

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
            .p11{
                position: relative;
            }
            .p22{
                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
            }
        </style>
        <p class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

3 番目のメソッド

の位置属性を引き続き使用します。 css、以下のように html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
            .p11{
                position: relative;
            }
            .p22{
                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
            }
        </style>
        <p class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

four、メソッド4

css3の新しい属性table-cellを利用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
            .p11{
                display: table-cell;vertical-align: middle;
            }
            .p22{
                margin: auto;
            }
        </style>
        <p class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

このメソッドのもう1つの利点は、p2の高さを固定する必要がないことです。以下の通り

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; background-color: green;}
            .p11{
                display: table-cell;vertical-align: middle;
            }
            .p22{
                margin: auto;
            }
        </style>
        <p class="p1 p11">
            <p class="p2 p22">
               p居中方法
            </p>
        </p>
    </body>
</html>

関連する推奨事項:

HTML内のdivのセンタリングに注意する必要があります

divセンタリング: divセンタリング方法の最も包括的な概要

方法CSS を使用して DIV を中央に配置します

以上がDIV のセンタリングを実現する 3 つの CSS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。