ホームページ > 記事 > ウェブフロントエンド > 要素を水平方向に中央揃えにする方法
要素を水平方向に中央揃えにする方法
- 藏色散人オリジナル
- 2020-07-02 10:55:304458ブラウズ
要素を水平方向に中央揃えにする方法: 1. インライン要素の場合は、「text-align: center;」属性を使用して水平方向の中央揃えを実現できます。 2. ブロックレベルの要素の場合は、「 margin: 0 auto" 属性を使用して、水平方向のセンタリングを実現します。Centered; 3. flex を通じて実装され、主軸の方向がセンタリングされるように設定します。
span)、インライン ブロック タグ (display: inline-block)): text-align: center、以下は span 例:
<p class="father"> <!-- 行内元素 --> <span class="son">hello</span> </p>
.father {
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;}利点: 優れた互換性、シンプル欠点: text-alignには継承があり、子孫要素に影響します
margin: 0 auto
<!-- 相对于body居中 --><body> <!-- 块级元素 --> <p class="son"></p></body>
.son {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 0 auto;}利点: シンプルで互換性が良い欠点: 幅は既知であり、親よりも小さい必要がありますレベル要素 (3) flex 実装、主軸方向を中心に設定
<p class="father"> <span class="son"></span> </p>
.father {
width: 500px;
height: 100px;
border: 1px solid red;
display: flex;
justify-content: center;}.son {
width: 100px;
background-color: turquoise;} 複数の要素がある場合は、次のように設定できます。 justify-content: space-around; /* 子元素左右两边距离均匀分布 */或justify-content: space-between; /* 最左边和最右边元素靠紧父元素，其余均匀 */
長所: 便利、自己適応が可能
短所: 互換性がやや悪い、PC 側
IE10 以上をサポート (4) 絶対測位の実装:子は父親と同じである必要があります
<p class="father"> <span class="son"></span> </p>
.father {
width: 500px;
height: 100px;
border: 1px solid red;
position: relative;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: 50%;
transform: translate(-50%);/* margin-left: -50% */
}利点: 利点はほとんどありません。中央に配置するのが難しい要素に配置を使用できます。
margin-left互換性の向上欠点: ドキュメント フロー外、コードが多い、互換性がある パフォーマンスが若干劣る、
は transform をサポートし、幅の値を知る必要がある。
以上が要素を水平方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。