Html 将 Twitter Bootstrap 按钮居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14271825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering a Twitter Bootstrap button
提问by Tom Maxwell
I'm making a form with Twitter Bootstrap, and am having a really difficult time centering the button. It's contained inside a div with a span of 7. Below is the HTML, and the button is at the very bottom. Any recommendations on how to center this thing?
我正在使用 Twitter Bootstrap 制作表单，并且很难将按钮居中。它包含在一个跨度为 7 的 div 中。下面是 HTML，按钮在最底部。关于如何集中这件事的任何建议？
<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="e.g. 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="37">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
</div>
</div>
回答by Lucas Santos
Bootstrap has it's own centering class named text-center.
Bootstrap 有自己的居中类，名为text-center。
<div class="span7 text-center"></div>
<div class="span7 text-center"></div>
回答by Tieson T.
If you don't mind a bit more markup, this would work:
如果你不介意更多的标记，这会起作用：
<div class="centered">
<button class="btn btn-large btn-primary" type="button">Submit</button>
</div>
With the corresponding CSS rule:
使用相应的 CSS 规则：
.centered
{
text-align:center;
}
I have to look at the CSS rules for the btnclass, but I don't think it specifies a width, so autoleft & right margins wouldn't work. If you added one of the spanor input-rules to the button, auto margins wouldwork, though.
我必须查看btn该类的 CSS 规则，但我认为它没有指定宽度，因此auto左右边距不起作用。但是，如果您向按钮添加了spanorinput-规则之一，则自动边距将起作用。
Edit:
编辑：
Confirmed my initial thought; the btnclasses do nothave a width defined, so you can't use auto side margins. Also, as @AndrewMnotes, you could simply use the text-centerclass instead of creating a new ruleset.
证实了我最初的想法；这些btn类没有定义宽度，因此您不能使用自动边距。此外，正如@AndrewM 所指出的，您可以简单地使用text-center该类而不是创建新的规则集。
回答by Vladimir Dimchev
Wrap in a div styled with "text-center" class.
包裹在一个带有“text-center”类样式的 div 中。
回答by TimNguyenBSM
Question is a bit old, but easy way is to apply .center-block to button.
问题有点老，但简单的方法是将 .center-block 应用于按钮。
回答by Steve
Since you want to center the button, and not the text, what I've done in the past is add a class, then use that class to center the button:
由于您想让按钮居中，而不是文本，我过去所做的是添加一个类，然后使用该类将按钮居中：
<button class="btn btn-large btn-primary newclass" type="button">Submit</button>
and the CSS would be:
和 CSS 将是：
.btn.newclass {width:25%; display:block; margin: 0 auto;}
The "width" value is up to you, and you can play with that to get the right look.
“宽度”值由您决定，您可以使用它来获得正确的外观。
Steve
史蒂夫
回答by Ronnie
.span7.btn { display: block; margin-left: auto; margin-right: auto; }
I am not completely familiar with bootstrap, but something like the above should do the trick. It may not be necessary to include all of the classes. This should center the button within its parent, the span7.
我对引导程序并不完全熟悉，但是像上面这样的东西应该可以解决问题。可能没有必要包含所有类。这应该将按钮置于其父级 span7 中。
回答by Rusty
If you have more than one button, then you can do the following.
如果您有多个按钮，那么您可以执行以下操作。
<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>
回答by Gregory
Bootstrap have a specific class for this: center-block
Bootstrap 有一个特定的类：center-block
<button type="button" class="your_class center-block"> Book </button>
