ホームページ >ウェブフロントエンド >CSSチュートリアル >Div 内でボタンを中央に配置するにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-22 10:35:46161ブラウズ

How Can I Center a Button Within a Div?

div 内での中央揃えのボタンの作成

div 内でのボタンの中央揃えは、さまざまな方法で実現できます。幅 100% の div の場合、それを実現する方法は次のとおりです:

Flexbox の使用 (更新された回答)

Flexbox は、最新で柔軟なアプローチを提供します:

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

これにより、ボタンが垂直方向と垂直方向の両方で中央に配置されます。

固定幅と位置決めの使用 (元の回答)

ボタンの幅と高さが固定されている場合は、相対位置決めと負のマージンを使用できます:

button {
    height: 20px;
    width: 100px;
    margin: -20px -50px; 
    position: relative;
    top: 50%;
    left: 50%;
}

あるいは、水平方向の配置のみに、margin: 0 auto; を使用します。または text-align: center; を設定します。ディビジョン

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。