CSSテキストとdivの垂直方向のセンタリング方法の例分析-CSSチュートリアル-php.cn

CSSテキストとdivの垂直方向のセンタリング方法の例分析

高洛峰

リリース： 2017-03-08 13:35:42

オリジナル

1758 人が閲覧しました

スタイルのレイアウトでは、要素を中央に配置する必要があることがよくあります。 CSS を使用して要素の水平方向の中央揃えを実現するのは比較的簡単です。テキストの場合は親要素に text-align: center を設定するだけでよく、p などのブロックレベルの要素の場合はマージン値を設定するだけです。左右のオートにします。要素の垂直方向の中央揃えを実現するために、CSS のvertical-align 属性を考える人もいるでしょうが、これは

、、などの valign 属性を持つ要素にのみ有効です。 table 要素、および

やのような要素には valign 属性がないため、vertical-align は機能しません。したがって、要素の垂直方向のセンタリングを実現するには、他の方法を使用する必要があります。以下に、一般的に使用されるいくつかの垂直方向のセンタリング方法をまとめました。

単一行のテキストを垂直方向に中央揃え

単一行のテキストの場合は、テキストの行の高さ (line-height) と領域の高さ (height) を一貫して設定するだけで済みます:

<!--html代码-->
    <p id="p1">
        这是单行文本垂直居中   
    </p>

/*css代码*/   
        #p1{   
            width: 300px;   
            height: 100px;   
            margin: 50px auto;   
            border: 1px solid red;   
            line-height: 100px; /*设置line-height与父级元素的height相等*/   
            text-align: center; /*设置文本水平居中*/   
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/   
        }

ログイン後にコピー

CSSテキストとdivの垂直方向のセンタリング方法の例分析

複数行テキストの垂直方向の中央揃え

複数行のテキストの垂直方向の中央揃えには 2 つの状況があり、1 つは親要素の高さが固定されず、内容に応じて変化する場合です。親要素の高さは固定です。

親要素の高さは固定されていません

親要素の高さが固定されていない場合、高さは内部テキストによってのみ拡張できます。このように、padding-top と padding-bottom を同じ値に設定するだけで、padding の値を設定することで、テキストを垂直方向の中央に表示することができます。親要素の高さは固定です

CSSのvertical-align属性についてはこの記事の冒頭でも触れましたが、valign属性を持つ要素に対してのみ有効となり、display:table;と組み合わせることでpがシミュレートできます。テーブル属性。したがって、親 p:display:table;; の表示属性を設定し、テキストコンテンツを含む p を追加し、その display:table-cell; およびvertical-align: middle; を設定します。具体的なコードは次のとおりです:

<!--html代码-->
    <p id="p1">
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中。   
    </p>

/*css代码*/   
        #p1{   
            width: 300px;   
            margin: 50px auto;   
            border: 1px solid red;   
            text-align: center; /*设置文本水平居中*/   
            padding: 50px 20px;   
        }

ログイン後にコピー

ただし、IE7 での表示効果は次のとおりです:

これは、IE7 以前のバージョンでは、display:table と display がサポートされていないためです。もちろん、IE7 未満のブラウザを考慮しなければ、上記の方法で垂直方向の中央揃えを実現できます。 IE7 以下を考慮すると、CSS ハックの知識を利用して、さまざまなブラウザーのプロパティを設定できます。

<!--html代码-->
    <p id="outer">
        <p id="middle">
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中。   
        </p>
    </p>

/*css代码*/   
        #outer{   
            width: 400px;   
            height: 200px;   
            margin: 50px auto;   
            border: 1px solid red;   
            display: table;   
        }   
        #middle{    
            display:table-cell;    
            vertical-align:middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;      
        }

ログイン後にコピー

子 p を垂直方向に中央揃えします

CSSテキストとdivの垂直方向のセンタリング方法の例分析

1. 子 p の特定のサイズに従ってオフセットを設定します

子 p が固定サイズの場合は、水平および垂直オフセットを 50 に設定します。親要素の % を指定し、実際のサイズに応じてオフセットを設定します。長さによって、子要素が半分のサイズ上と左に移動します

<!--html代码-->
    <p id="outer">
        <p id="middle">
            <p id="content">
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)。   
            </p>
        </p>
    </p>

/*css代码*/   
        #outer{   
            width: 400px;   
            height: 200px;   
            margin: 50px auto;   
            border: 1px solid red;   
            display: table;   
            *position:relative;  //兼容IE7及以下版本   
        }   
        #middle{    
            display:table-cell;    
            vertical-align:middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;   
            *position:absolute;   //兼容IE7及以下版本   
            *top:50%;     
        }   
        #content {     
           *position:relative;  //兼容IE7及以下版本    
           *top:-50%;     
        }

ログイン後にコピー

これこのメソッドは IE7 および IE6 と互換性がありますが、子 p のサイズが固定されている場合にのみ有効です。多くの場合、sub-p のサイズは固定されていません。次に、sub-p のサイズが固定されていない場合の方法を説明します。表示効果は基本的にこれと同じなので、レンダリングを逐一掲載するわけではありませんので、読者の方はコードをコピーしてご自身で検証していただけます。

2.translateを使用します

最初の方法では、親要素を水平方向と垂直方向に50%オフセットした後、マージン値を設定せずに、CSS3のtransform属性を使用してCSSコード部分の値を設定します。

<!--html代码-->
    <p id="outer">
        <p id="middle">
            子p(固定大小)垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
                background-color: #13CDF4;   
                width: 300px;   
                height: 200px;   
                position: relative;   
        }   
        #middle{    
                background-color: #E41627;   
                width: 100px;   
                height: 100px;   
                margin: auto;   
                position: absolute;   
                left: 50%;    
                top: 50%;   
                margin-left: -50px;   
                margin-top: -50px;   
        }

ログイン後にコピー

このメソッドでは、transform は css3 の属性であることに注意してください。IE9 より前のバージョンを使用する場合は、ブラウザの互換性にご注意ください。

CSSテキストとdivの垂直方向のセンタリング方法の例分析

3.絶対レイアウトを使用します

#middle{    
        background-color: #E41627;   
        width: 100px;   
        height: 100px;   
        margin: auto;   
        position: absolute;   
        left: 50%;    
        top: 50%;   
        transform: translateX(-50%) translateY(-50%);   
        -webkit-transform: translateX(-50%) translateY(-50%);   
    }

ログイン後にコピー

この方法はIE7とIE6と互換性がありません

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用vertical-align属性实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: table-cell;    
            vertical-align: middle;   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
            margin: 0 auto;   
        }

ログイン後にコピー

这种方法是将p转变成table-cell显示，然后通过vertical-align: middle;再设置其子元素垂直居中，这种方法和上面设置父级元素高度固定时多行文本居中的方法一样，所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以参照上面的代码，上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的p垂直居中。这里我就不重述了。

5、利用display: flex

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用display: flex实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: flex;   
            justify-content: center;/*实现水平居中*/   
            align-items:center; /*实现垂直居中*/   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
        }

ログイン後にコピー

这种方法只需要在父级p中加上这三句话就行，但是在IE中兼容性不好，IE9及以下IE浏览器版本都不支持。

以上是我总结的一些常用到的垂直居中的设计方法，大家可以根据自己的需要选择合适的设计方式。

以上がCSSテキストとdivの垂直方向のセンタリング方法の例分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。