divの中央にボタンを置く

Question

divの中央に（縦と横の両方に）ボタンを配置したいと思います。ここで

：

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

これを達成するであろう：CSS: center element within a <div> element

承認された答えは、このコードは、と言っています。このコードを適用すると、ボタンは垂直に入力されますが、水平には入力されません。代わりにdivの右端に配置されます。

私のhtmlコードはこれです：

<div class="col-md-1" id="button_div"></div> 

次のようにボタンを動的に作成されます。

私も水平方向のボタンを中央にするにはどうすればよい

closeButton = document.createElement("BUTTON"); 
var text = document.createTextNode("remove"); 
closeButton.className = "btn btn-danger"; 
closeButton.setAttribute("style", "margin: auto;"); 

closeButton.appendChild(text);          

$("#button_div").append(closeButton); 

を？

Answer 1

正常に動作するようです。ボタンのためにmargin:autoは必要ありません。

closeButton = document.createElement("BUTTON"); 
 
var text = document.createTextNode("remove"); 
 
closeButton.className = "btn btn-danger"; 
 
/* closeButton.setAttribute("style", "margin: auto;"); */ 
 

 
closeButton.appendChild(text);          
 

 
$("#button_div").append(closeButton);

#button_div { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 200px; 
 
    background-color: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-1" id="button_div"></div>

Answer 2

以下のチェックスニペット。その働き。

 

 
    closeButton = document.createElement("BUTTON"); 
 
    var text = document.createTextNode("remove"); 
 
    closeButton.className = "btn btn-danger"; 
 
    /* closeButton.setAttribute("style", "margin: auto;"); */ 
 

 
    closeButton.appendChild(text);          
 

 
    $("#button_div").append(closeButton);

 

 
#button_div { 
 
        display:-webkit-flex; 
 
        display: flex; 
 
        align-items: center; 
 
        justify-content: center; 
 
        text-align:center /*add this*/ 
 
      
 
       } 
 
      .btn{ 
 
        display:inline-block 
 
       } 
 
      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-md-1" id="button_div"> 
 

 
</div>

#button_div { 
      display:-webkit-flex; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      text-align:center /*add this*/ 

     } 
    .btn{ 
      display:inline-block 
     }