CSS 使用 Bootstrap 3 居中一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19941414/
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
center a row using Bootstrap 3
提问by john
How to center a row (12 column) in Bootstrap 3 ?
I do not want to use the offset
如何在 Bootstrap 3 中居中一行（12 列）？我不想使用offset
I am using this way but not worked.
我正在使用这种方式，但没有奏效。
.col-centered{
float: none;
margin: 0 auto;
} <div class="row" style="max-width: 300px;">
<div class="col-md-12 col-xs-12 col-centered">
<div class="input-group">
<div class="input-group-btn">
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
<ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
<li><a href="#"> Test 1 </a></li>
<li><a href="#"> Test 2 </a></li>
<li><a href="#"> Test 3 </a></li>
<li><a href="#"> Test 4 </a></li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>Is there any solution to this? I have not an idea for this work.
有什么解决办法吗？我对这项工作没有想法。
回答by Waleed Asender
Why not using the grid system?
为什么不使用网格系统？
The bootstrap grid system consist of 12 columns, so if you use the "Medium" columns it will have a 970px width size.
bootstrap 网格系统由 12 列组成，因此如果您使用“中”列，它将具有 970 像素的宽度大小。
Then you can divide it to 3 columns (12/3=4) so use 3 divs with "col-md-4" class:
然后你可以把它分成 3 列（12/3=4），所以使用 3 个带有“col-md-4”类的 div：
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
Each one will have 323px max width size. Keep the first and the last empty and use the middle one to get your content centerd:
每个将有 323px 最大宽度大小。保持第一个和最后一个为空，并使用中间的让您的内容居中：
<div class="col-md-4"></div>
<div class="col-md-4">
<p>Centered content.</p>
</div>
<div class="col-md-4"></div>
回答by hugo der hungrige
What you are doing is not working, because you apply the margin: auto to the full-width column.
您正在做的事情不起作用，因为您将 margin: auto 应用于全宽列。
Wrap it in a div and center that one. E.g:
将它包裹在一个 div 中并将其居中。例如：
<div class="i-am-centered">
<div class="row">...</div>
</div>
.
.
.i-am-centered { margin: auto; max-width: 300px;}
Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.
无论如何，它是一个更清洁的解决方案，因为它更具表现力，并且您通常不想弄乱网格。
回答by rinderwahn
I know this question was specifically targeted at Bootstrap 3, but in case Bootstrap 4 users stumble upon this question, here is how i centered rows in v4:
我知道这个问题是专门针对 Bootstrap 3 的，但如果 Bootstrap 4 用户偶然发现了这个问题，下面是我如何在 v4 中居中行：
<div class="container">
<div class="row justify-content-center">
...
More related to this topic can be found on bootstrap site.
可以在 bootstrap站点上找到与此主题相关的更多信息。
回答by gonzo
Instead of
代替
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
You could just use
你可以用
<div class="col-md-4 col-md-offset-4"></div>
As long as you don't want anything in columns 1 & 3 this is a more elegant solution. The offset "adds" 4 columns in front, leaving you with 4 "spare" after.
只要您不想要第 1 列和第 3 列中的任何内容，这是一个更优雅的解决方案。偏移量在前面“添加”了 4 列，在后面留下了 4 个“备用”。
PS I realise that the initial question specifies no offsets but at least one previous answer uses a CSS hack that is unnecessary if you use offsets. So for completeness' sake I think this is valid.
PS 我意识到最初的问题没有指定偏移量，但至少有一个先前的答案使用了 CSS hack，如果你使用偏移量，这是不必要的。所以为了完整起见，我认为这是有效的。
回答by Rashi
you can use grid system without adding empty columns
您可以使用网格系统而无需添加空列
<div class="col-xs-2 center-block" style="float:none"> ... </div>
change col-xs-2to suit your layout.
更改col-xs-2以适合您的布局。
check preview: http://jsfiddle.net/rashivkp/h4869dja/
回答by Faisal Ashfaq
We can also use col-md-offset like this, it would save us from an extra divs code. So instead of three divs we can do by using only one div:
我们也可以像这样使用 col-md-offset ，它可以使我们免于额外的 div 代码。因此，我们可以只使用一个 div，而不是三个 div：
<div class="col-md-4 col-md-offset-4">Centered content</div>
回答by Saad Mujeeb
Simply use text-center class
只需使用 text-center 类
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Here Comes your Text</h3>
</div>
</div>
回答by Monero Jeanniton
Add this to your css:
将此添加到您的CSS：
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
Then, in your HTML code:
然后，在您的 HTML 代码中：
<div class=" row row-centered">
<div class="col-*-* col-centered>
Your content
</div>
</div>
回答by Ezequiel
Try this, it works!
试试这个，它有效！
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</div>
</div>
</div>
</div>
Then, in css define the width of center div and center in a document:
然后，在 css 中定义文档中 center div 和 center 的宽度：
.center {
margin: 0 auto;
width: 80%;
}
回答by tfa
I use text-align-center in a row like this
我像这样连续使用 text-align-center
<div class="row tac">
<h1>Centered content</h1>
</div>
<style>
.tac { text-align: center}
</style>
