どのように列をブートストラップの行に集中させることができますか？

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 

<style> 

    h1 { 
     text-align: center; 
     color: white; 
    } 

    #box { 
     background: #005A31; 
     position: relative; 
     top: 25vh; 
     width: 50%; 
    } 

    #results { 
     background: #F3FAB6; 
     margin: 1%; 
     text-align: right; 
     font-size: 300%; 
    } 

    .buttons { 
     background: #A8CD1B; 
     margin: 1%; 
     text-align: center; 
     display: inline-block; 
     border: hidden; 
     border-radius: 20%; 
     font-size: 200%; 
     padding: 4%; 
    } 

    .buttons:hover { 
     cursor: pointer; 
     background: #F3FAB6; !important 
    } 

    .operations { 
     background: #CBE32D; 
    } 

    .center-block { 
     float: none !important; 
    } 


</style> 

<html> 
    <div class="container-fluid"> 
     <div class="container" id="box"> 
      <h1>JavaScript Calculator</h1> 
      <div id="results">0</div> 
      <div class="row"> 
       <div id="seven" class="buttons col-md-2 center-block">7</div> 
       <div id="eight" class="buttons col-md-2 center-block">8</div> 
       <div id="nine" class="buttons col-md-2 center-block">9</div> 
       <div id="multiply" class="buttons operations col-md-3 center-block">x</div> 
      </div> 
      <div class="row"> 
       <div id="four" class="buttons col-md-2 center-block">4</div> 
       <div id="five" class="buttons col-md-2 center-block">5</div> 
       <div id="six" class="buttons col-md-2 center-block">6</div> 
       <div id="divide" class="buttons operations col-md-3 center-block">/</div> 
      </div> 
      <div class="row"> 
       <div id="one" class="buttons col-md-2 center-block">1</div> 
       <div id="two" class="buttons col-md-2 center-block">2</div> 
       <div id="three" class="buttons col-md-2 center-block">3</div> 
       <div id="add" class="buttons operations col-md-3 center-block">+</div> 
      </div> 
      <div class="row"> 
       <div id="decimal" class="buttons col-md-2 center-block">.</div> 
       <div id="zero" class="buttons col-md-2 center-block">0</div> 
       <div id="ans" class="buttons col-md-2 center-block operations">Ans</div> 
       <div id="equals" class="buttons col-md-3 operations center-block">=</div> 
      </div> 
     </div> 
    </div>  
</html>

私はJavaScipt電卓を作成しようとしています。私は基本的なものを持っているが、私はちょうど私がボタンのために作成した<div>の中心に見えることができない。私はブートストラップにcenter-blockプロパティを使用しようとしていますが、それは何も変更していないようです。どのように列をブートストラップの行に集中させることができますか？

このJSFiddleを参照してください：https://jsfiddle.net/uqfd88o5/

出典

2016-05-29 Human Cyborg Relations

私はすべてのボタンのコンテナのdiv id="rowcontainer"を追加しました。次に、その容器にCSS text-align:center;を追加しました。

<html> 
    <div class="container-fluid"> 
     <div class="container" id="box"> 
      <h1>JavaScript Calculator</h1> 
      <div id="results">0</div> 
      <div id="rowcontainer"> 


      <div class="row"> 
       <div id="seven" class="buttons col-md-2 center-block">7</div> 
       <div id="eight" class="buttons col-md-2 center-block">8</div> 
       <div id="nine" class="buttons col-md-2 center-block">9</div> 
       <div id="multiply" class="buttons operations col-md-3 center-block">x</div> 
      </div> 
      <div class="row"> 
       <div id="four" class="buttons col-md-2 center-block">4</div> 
       <div id="five" class="buttons col-md-2 center-block">5</div> 
       <div id="six" class="buttons col-md-2 center-block">6</div> 
       <div id="divide" class="buttons operations col-md-3 center-block">/</div> 
      </div> 
      <div class="row"> 
       <div id="one" class="buttons col-md-2 center-block">1</div> 
       <div id="two" class="buttons col-md-2 center-block">2</div> 
       <div id="three" class="buttons col-md-2 center-block">3</div> 
       <div id="add" class="buttons operations col-md-3 center-block">+</div> 
      </div> 
      <div class="row"> 
       <div id="decimal" class="buttons col-md-2 center-block">.</div> 
       <div id="zero" class="buttons col-md-2 center-block">0</div> 
       <div id="ans" class="buttons col-md-2 center-block operations">Ans</div> 
       <div id="equals" class="buttons col-md-3 operations center-block">=</div> 
      </div> 
      </div> 
     </div> 
    </div>  
</html> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

出典

2016-05-29 01:13:26 Joel

これはjsfiddle https://jsfiddle.net/uqfd88o5/2/です。 – Joel

どのように列をブートストラップの行に集中させることができますか？

答えて

関連する問題