CSS を使用して子要素を親の中央に配置する方法

CSS を使用して要素を left: 50%; で中央揃えする場合、配置はウィンドウ全体を基準にします。ただし、親

内の要素を中央に配置する場合は、その要素を含む要素を基準にして配置する必要があります。

解決策

これを実現するには、テキストの組み合わせを使用します。 -align: 中央;およびマージン: 自動; CSS プロパティ。

ステップ 1: 親

を揃えるCenter

text-align: center を設定します。親へ

要素。これにより、すべての子要素がその中で中央に配置されます。

ステップ 2: マージンを使用して特定の子を中央に配置します

親

を一度配置すると、

が整列している場合は、特定の子要素を中央に配置する必要があります。マージンの適用: 自動;子要素に。これにより、子要素の幅に関係なく、要素が親

内の中央に自動的に配置されます。

#parent {
  text-align: center;
  background-color: blue;
  height: 400px;
  width: 600px;
}

.child {
  height: 100px;
  width: 200px;
  text-align: left;
}

.center {
  margin: auto;
  background-color: green;
}

わかりやすくするために、例を示します:

以上がCSS を使用して子要素を親の中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。