Question

1/12/2015

我正在尝试创建一个JavaScipt计算器。我已经掌握了基本内容，但我似乎无法将我为按钮创建的<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>放在中心位置。我正在尝试使用中心块属性进行引导，但这似乎没有改变任何东西。

请参阅此JSFiddle：https://jsfiddle.net/uqfd88o5/

Answer 1

我为所有按钮添加了一个容器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>

如何在引导程序中将列中心连接？

1 个答案: