ボタンを Div 内の中央に配置するにはどうすればよいですか?

Div 内のボタンの中央揃え

Web 開発では、多くの場合、ボタンを含む div 内の中央にボタンを配置することが望ましいです。この課題に対する 2 つの解決策を見てみましょう。

Flexbox の使用

Flexbox は、要素を両方の軸に沿って配置するための洗練されたソリューションを提供します。 div 内でボタンを水平方向および垂直方向に中央揃えにするには:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

水平方向の中央揃えのみが必要な場合は、justify-content プロパティを使用できます:

#wrapper {
  display: flex;
  justify-content: center;
}

Margin-ベースのアプローチ

フレックスボックスを使用せずに、ボタンを中央に配置できます。 margins:

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}

水平方向の中央揃えの場合のみ、次の 2 つのアプローチのいずれかを使用できます。

• margin: 0 auto;ボタン
• text-align: center;含まれる div

上

以上がボタンを Div 内の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。