要素を水平方向に中央揃えにする方法-フロントエンドQ&A-php.cn

要素を水平方向に中央揃えにする方法

藏色散人

リリース： 2020-07-02 10:55:30

オリジナル

4511 人が閲覧しました

要素を水平方向に中央揃えにする方法: 1. インライン要素の場合は、「text-align: center;」属性を使用して水平方向の中央揃えを実現できます。 2. ブロックレベルの要素の場合は、「 margin: 0 auto" 属性を使用して、水平方向のセンタリングを実現します。Centered; 3. flex を通じて実装され、主軸の方向がセンタリングされるように設定します。

要素を水平方向に中央揃えにする方法

(1) インライン要素 (テキスト、ピクチャ) 、インラインタグ (

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には継承があり、子孫要素に影響します

(2) ブロックレベルの要素:

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

互換性の向上欠点: ドキュメントフロー外、コードが多い、互換性があるパフォーマンスが若干劣る、

IE9 以降

は transform をサポートし、幅の値を知る必要がある。

フロントエンドビデオ

」

以上が要素を水平方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。