web-dev-qa-db-ja.com

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

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

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

<div style="width:100%; height:100%">
     <button type="button">hello</button>
</div>
htmlcsscentering
170
foreyez

更新された回答

私はそれが積極的な答えであることに気付いたのでアップデートします、しかし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;
}
269
Loktar

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

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

またはこのようにすることができます

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

最初のものはdiv内のすべてを中央揃えにします。もう一方はボタンだけを中央揃えにします。

93
RenatoSz

et voila：

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

更新 ：OPが水平方向と垂直方向の中央を探している場合、 この答え は固定のwidth/height要素に対して行います。

19
Pat

マージン：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;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container 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-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>
9
adeneo

提供されている詳細は限られていますが、最も単純な状況を想定し、text-align: centerを使用できるとします。

http://jsfiddle.net/pMxty/ /

6
James Montagne

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

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

それからボタンにクラスを追加します。

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

あなたはそれを単純にするべきです。

最初にあなたのテキストまたはボタンの最初の位置がわかります： 

<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 タグに追加することによって、 ボタンタグを保持する

style： "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>

enter image description here

4
nadir hamidou

これに遭遇し、私は私が使った解決策もそのまま残したいと思いました。それはline-heightとtext-align: centerを使って垂直と水平の両方のセンタリングをすることです：

JSFiddleを動作させるにはここをクリックしてください

2
lhan

ほとんどの場合に適用される非常に単純な答えは、単にマージンを0 autoに設定し、表示をblockに設定することです。あなたは私のデモで私が自分のボタンをどのように中心に置いているかを見ることができます CodePen

enter image description here

2
JGallardo

あなたの場合のように動的に計算される幅の<button type = "button">内で垂直方向と水平方向の両方に<div>をセンタリングするためには、これはすべきことです：

  1. text-align: center;を折り返し<div>に設定します。これは、<div>（またはウィンドウ）のサイズを変更するときはいつでもボタンを中央揃えにします。

  2. 垂直方向の配置では、ボタンにmargin: valuepx;を設定する必要があります。これはvaluepxの計算方法に関する規則です。

    valuepx = (wrappingDIVheight - buttonHeight)/2

これは JS Binデモ です。

2
Billal Begueradj

Divを#div、buttonを#buttonとします。

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

#button {}

それから、いつものようにボタンをdivに入れ子にします。

1
Victor Nițu

親要素のサイズを気にせずにボタンを縦方向と横方向に中央揃えするレスポンシブ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
CR Rollyson

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

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }
1
Ashhad Sameer

ボタンを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>
0
Maijied Hasan Shuvo