居中Twitter引导button
我正在使用Twitter Bootstrap制作一个表单，并且将button集中在一个非常困难的时间。 它包含在一个跨度为7的div中。下面是HTML，并且button位于最下面。 有关如何居中这件事的任何build议？
<div class="form span7"> <div id="get-started"> <div id="form-intro"> <strong><h1>1. Get Started: Some basics</h1></strong> </div> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputSaving">What are you saving for?</label> <div class="controls"> <input class="span4" type="text" id="inputSaving" placeholder="eg Swimming Lessons, Birthday Party, College Fund, etc."> </div> </div> <div class="control-group"> <label class="control-label" for="description">Add a short description</label> <div class="controls"> <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea> </div> </div> <div class="control-group"> <label class="control-label" for="categoryselect">Choose a Category</label> <div class="controls"> <select class="span4" id="categoryselect"> <!-- Add some CSS and JS to make a placeholder value--> <option value="Kittens">Kittens</option> <option value="Keyboard Cat">Keyboard Cat</option> <option value="Twitter Bird">Twitter Bird</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="imageselect">Choose an image</label> <div class="controls span4"> <img src="piggyimage.png" id="imageselect" alt="image-select" /> </div> </div> <div class="control-group"> <label class="control-label" for="goal">Your Saving Goal</label> <div class="controls"> <input type="text" class="span4" id="goal" placeholder="$1337"> </div> </div> <button class="btn btn-large btn-primary" type="button">Submit</button> </form> </div> </div> Bootstrap有它自己的名为文本中心的居中类。
<div class="span7 text-center"></div>
如果你不介意更多的标记，这将工作：
<div class="centered"> <button class="btn btn-large btn-primary" type="button">Submit</button> </div>
有了相应的CSS规则：
.centered { text-align:center; }
我不得不看btn类的CSS规则，但我不认为它指定了宽度，所以auto左右边距不起作用。 如果您将一个span或input-规则添加到button，自动边距将起作用。
编辑：
证实了我最初的想法; btn类没有定义宽度，所以你不能使用自动侧边距。 另外，正如@AndrewM所说，你可以简单地使用text-center类而不是创build一个新的规则集。
用“文本中心”类来包装。
问题是有点旧，但简单的方法是将.center-block应用到button。
既然你想中心button，而不是文本，我在过去做的是添加一个类，然后使用该类中心button：
<button class="btn btn-large btn-primary newclass" type="button">Submit</button>
和CSS将是：
.btn.newclass {width:25%; display:block; margin: 0 auto;}
“宽度”值取决于你，你可以玩，以获得正确的外观。
史蒂夫
.span7.btn { display: block; margin-left: auto; margin-right: auto; }
我不完全熟悉bootstrap，但是像上面这样的东西应该可以做到。 可能没有必要包括所有的类。 这应该将button居中在其父级span7中。
如果您有多个button，则可以执行以下操作。
<div class="center-block" style="max-width:400px"> <a href="#" class="btn btn-success">Accept</a> <a href="#" class="btn btn-danger"> Reject</a> </div>
Bootstrap有一个特定的类：center-block
<button type="button" class="your_class center-block"> Book </button>
