CSS の中央揃えのためのいくつかのオプション (概要)

この記事では、複数の CSS センタリング ソリューションを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

(学習ビデオ共有: css ビデオ チュートリアル)

水平方向の中央揃え

インライン要素

インライン要素 (リンク、span または img など) を中央に配置するには、text-align を使用します。センターで十分です。

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

複数のインライン要素の場合は、text-align: center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

## を使用することもできます。

Flexbox

フレックスボックスを使用すると、要素をすばやく中央に配置することもできます:

.desk {
  display: flex;
  justify-content: center;
}

複数のインライン項目に対しても正常に機能します:

CSS グリッド

グリッド コンテナーを使用する場合、図内のプレートはグリッド領域に基づいて中央に配置されます。複数のプレートを単一の要素でラップしない限り、これは機能しないことに注意してください。

.desk {
  display: grid;
  justify-content: center;
}

ブロック要素

自動マージン

幅と高さは既知のブロックです

margin-left:auto および margin-right:auto を設定すると、要素を中央に配置できます。

.plate {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

複数のブロック要素の場合は、それらを 1 つの要素で囲み、この親要素を中央に配置する必要があります。

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

フレックスボックスの場合、

justify-content:center も中央揃えに使用されます。要素:

.desk {
  display: flex;
  justify-content: center;
}

複数の要素の場合、それらを 1 つの要素で囲む必要はなく、フレックスボックスですべてを中央に配置できます。

CSS 位置決め

絶対位置決めを使用すると、CSS

transform を使用して簡単に水平方向の中央に配置できます。

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

要素の幅がわかっている場合は、CSS 変換の代わりに負のマージンを使用できます。

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

垂直方向のセンタリング

インライン要素

垂直方向のパディング

1 つ要素を垂直方向に中央揃えにする最も簡単な方法は、

padding:

  padding-top: 24px;
  padding-bottom: 24px;
}

Vertical Align

を使用することです。

vertical-align 属性は 1 つ以上の要素で使用できます。

この例では、フォークとナイフはテーブルの垂直方向の中央に配置されている必要があります。

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

プレート、フォーク、ナイフを整列させるには、フレックスボックスを使用できます:

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
}

# #ブロック要素

絶対配置

要素を絶対配置することで、CSS

transform

を使用して要素を垂直方向の中央に配置できます。 ##

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

要素の高さがわかっている場合は、代わりに負のマージンを使用できます。transform

。

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

CSS グリッド

CSS グリッドを使用すると、align-items

を使用して項目をグリッド領域の垂直方向の中央に配置できます。

.desk {
  display: grid;
  align-items: center;
}

水平方向と垂直方向の中央揃え

インライン要素

パディングテキスト整列

#

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

#その他の要素タイプ

##絶対配置

#

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#Flexbox

justify-content:center および

align-items:center

: ## を使用して、要素を垂直方向と水平方向に中央揃えにすることができます。 #

.plate {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid

は、justify-content と を組み合わせた

place-items

属性を通じて渡すことができます。 align -items:

.desk {
  display: grid;
  place-items: center;
}

更多编程相关知识，请访问：编程入门！！

以上がCSS の中央揃えのためのいくつかのオプション (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。