CSSでページを中央揃えにする方法

CSS でページの中央を設定する方法: 1. 「text-align:center」は水平方向の中央揃えを設定します。 2. 「dispaly:flex」設定は水平方向の中央揃えになります。 3. 「display:table-cell」は垂直方向のセンタリングを設定します。 4. 「position:absolute」は垂直方向のセンタリングを設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSSでもセンタリングは比較的一般的ですが、センタリングに関する身近な書き方をいくつかまとめておきます。もちろん、もっと良い書き方があるはずです。記事に不備があればご指摘ください。

次のシナリオが与えられたとします:

<p class="parent">
  <p class="child">
    DEMO
  </p>
</p>

このうち、class='child'のコンテンツの長さが不定であるため、このdivのセンタリングを実現する必要があります。

1. 水平方向の中央揃え

1.1text-align: center

インライン要素またはインラインのような要素をブロックレベルの親コンテナの中央に配置するには、text-align: center,
を使用するだけです。 このメソッドは、inline/inline-block/inline-table/inline/flex を中央に配置できます。

えええええ

child div が複数ある場合、display: inline-block を設定する場合、各 div の隙間に注意する必要がありますが、バグではありません の特徴はこんな感じです。

これらのギャップを削除したい場合は、いくつかの解決策があります:

1. HTML 内のスペースを削除します。

要素間に空白が入ってしまうのは、タグセグメント間の隙間が原因なので、現時点では HTML の間の隙間を削除するだけで済みます。

例えばこの書き方、もちろん隙間をなくすだけでいろんな書き方がありますが、この書き方はいつもちょっと反人間的な感じがします。

.child {
  display:inline-block;
  /*子元素文字会继承居中，因此要在上面写上向左边居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

2. 負のマージン値を使用します

このメソッドの負の値は決定するのが難しく、コンテキスト フォントなどに関係するため、このメソッドは大規模な使用には適していません。

<p class="parent">
  <p class="child">
  DEMO1</p
  ><p class="child">
  DEMO2</p
  ><p class="child">
  DEMO3</p>
</p>

3. フォント サイズ: 0

を使用します。 この方法では、この間隔の問題を非常に簡単に解決できます。必要なのは、親 div の font-size を 0 に設定することだけです。その後、忘れずにchild div font-size プロパティを元に戻すだけです。

.child {
  margin-right; -5px;
}

4. 文字間隔または単語間隔を使用します

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

1.2 表示: flex

IE10 のみと互換性あり

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

2. 垂直中央揃え

1.1display: table-cell

高さの異なる要素を垂直方向の中央に配置できます。

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

2.2 位置: 絶対

.parent {
  display:table-cell;
  vertical-align:middle;
}

推奨学習:

CSS ビデオ チュートリアル

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