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

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

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

水平方向の中央揃え

インライン要素

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

.desk {
  text-align: center;
}

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

.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;
}

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

Flexbox

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

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

CSS 位置決め

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

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

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

垂直方向のセンタリング

インライン要素

垂直方向のパディング

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

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

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

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

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

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 および

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

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

ログイン後にコピー

CSS Grid

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

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

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

ログイン後にコピー

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

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