div内のボタンを中央に配置する方法は?


220

幅が100%のdivがあります。

ボタンを中央に配置したいのですが、どうすればよいですか?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>


ボタンに使用しているコードは何ですか?
David Nguyen

2
彼は垂直方向と水平方向の両方のセンタリングを望んでいると思います。これまでのところ、これを達成するソリューションはありません。CSSは、(=垂直センタリングで非常に良いではありません。
mrtsherman

フレックスボックスはこの答えを2014年には役に立たないと言っています。ええ、ベイビー!
foreyez 14

回答:


352

更新された回答

アクティブな回答だと気付いたため更新していますが、現在はFlexboxが適切な方法です。

ライブデモ

垂直方向と水平方向の配置。

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

ちょうど水平(主フレックス軸がデフォルトである水平である限り)

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

固定幅を使用し、フレックスボックスを使用しない元の回答

元のポスターで垂直方向と中央揃えが必要な場合は、ボタンの幅と高さを固定するのが非常に簡単です。以下を試してください。

ライブデモ

CSS

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

ちょうど水平方向の配置のいずれかを使用します

button{
    margin: 0 auto;
}

または

div{
    text-align:center;
}

21
-1これはひどいです。基本的に、幅を100%に設定し、マージンを-50に設定します。ただし、ボタンが含まれている要素の上に表示されるなど、他の問題を引き起こし、サイズ変更ではうまく機能しません。
CodyBugstein 2014年

3
少なくともあなたの反対票@Imrayを説明してくれてありがとう、また、可変幅ではなく固定幅と高さを言ったことにも注意してください。したがって、サイズ変更は要因ではありません。「基本的に」私は幅を100%ではなく100pxに設定し、マージンを半分の-50pxに設定します。これは、センタリングのかなり標準的な方法です。私はあなたの答えを楽しみにしいます:)
Loktar

1
あなたのウェルクス(過酷さのため申し訳ありませんが、ユーモアのセンスがあってうれしいです)私は100pxを意味しました。あなたが「修正済み」と書いたとは思いませんでしたが、それでも、この答えはほとんどの状況では適切ではないと思います
CodyBugstein

109

あなたはただ作ることができます:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

または、代わりに次のようにすることもできます。

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

1つ目は、div内のすべてを中央揃えにします。もう1つはボタンだけを中央揃えにします。


28

et voila:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

更新:OPが水平および垂直の中心を探している場合、この回答は固定の幅/高さの要素に対してそれを行います。


11
「display:block;」も必要になる場合があります。
SoluableNonagon 2014

1
@SoluableNonagonそれだけです!「display:block」は「margin:0 auto」でトリックを実行します
Tomas Lukac

8

マージン:0自動; 水平方向のセンタリングのみの正解です。jqueryを使用して、次のようなものが機能する両方の方法を集中させるには:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

更新... 5年後、親DIV要素でflexboxを使用して、ボタンを水平方向と垂直方向の両方に簡単に中央揃えできます。

最良のサポートのために、すべてのブラウザプレフィックスを含みます

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}


2
jQuery?マジ?
Pranesh Ravi 2016

3
@PraneshRavi-2011年、CSSで何かを垂直方向に中央揃えするために利用できるオプションは多くなかったので、はい、要素の正確な高さと幅がわからず、マージンを差し引くことができれば、JavaScriptは珍しくありませんでした。
adeneo 2016

常にflexを使用して、要素を垂直方向と水平方向の両方に中央揃えできます。
Pranesh Ravi 2016

6
@PraneshRavi-はい、できます。フレックスボックスはこの質問に対する素晴らしい答えです。それを付け加えますが、2011年にはフレックスボックスはありませんでした。
adeneo

@JGallardo-他の回答がボタンを水平方向だけでなく垂直方向にも中央に配置しようとしている部分を逃したと思います。9年前は、CSSだけでそれを行うための良いオプションは実際にはありませんでした
adeneo


7

フレックスボックスの使用

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

次に、クラスをボタンに追加します。

<button class="Center">Demo</button> 

6

ここに行くのは簡単です。

最初に、テキストまたはボタンの初期位置があります。

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

このcssコード行をh2タグまたはボタンタグ保持するdivタグに追加する

スタイル: "text-align:center;"

最終的に結果コードは次のようになります:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

ここに画像の説明を入力してください


あなたはようこそ兄弟です
nadir hamidou


2

あなたの場合のように動的に計算される幅の<button type = "button">中で垂直と水平の両方を中央に配置するには、次の<div>ようにします:

  1. text-align: center;ラッピングに設定し<div>ます。これにより、<div>(またはウィンドウではなく)サイズを変更するたびにボタンが中央に配置されます
  2. 垂直方向の配置についてはmargin: valuepx;、ボタンを設定する必要があります。これは、計算方法に関するルールvaluepxです。

    valuepx = (wrappingDIVheight - buttonHeight)/2

こちらがJS Binのデモです。


2

ほとんどの場合に適用される非常に単純な答えは、マージンを0 autoに設定し、表示をに設定することblockです。CodePenのデモでボタンを中央に配置した方法を確認できます

ここに画像の説明を入力してください


1

最も簡単なことは、「div」として入力することです。「margin:0 auto」を指定しますが、中央に配置したい場合は、幅を指定する必要があります。

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

1

親要素のサイズに関係なくボタンを垂直方向と水平方向に中央に配置するレスポンシブCSSオプション(明確化と分離の懸念のためにデータ属性フックを使用)

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

フィドル:https : //jsfiddle.net/crrollyson/zebo1z8f/


1

ボタンをdivの中央に配置する応答的な方法:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

1
この答えは、インラインスタイルを削除してデモを表示することで改善できる可能性があります
JGallardo 2018

1

divが#divで、ボタンが#buttonであるとします。

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

次に、通常どおりボタンをdivにネストします。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.