Html 如何将引导列中的内容居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35163164/
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
How to center content in a bootstrap column?
提问by Mark
I am trying to center column's content. Does not look like it works for me. Here is my HTML:
我正在尝试将列的内容居中。看起来对我不起作用。这是我的 HTML：
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
回答by inertia
Use:
用：
<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
instead of
代替
<div class="col-xs-1 center-block">
You can also use bootstrap 3 css:
您还可以使用引导程序 3 css：
<!-- recommended method -->
<div class="col-xs-1 text-center">
回答by Dexter
I know this question is old. And the question did not mentioned which version of Bootstrap he was using. So i'll assume the answer to this question is resolved.
我知道这个问题很老了。并且问题没有提到他使用的是哪个版本的 Bootstrap。所以我假设这个问题的答案已经解决。
If any of you (like me) stumbled upon this question and looking for answer using current (2019) bootstrap framework, then here's the solution.
如果你们中的任何人（像我一样）偶然发现了这个问题并使用当前（2019 年）引导框架寻找答案，那么这就是解决方案。
Bootstrap 4
引导程序 4
Use d-flex justify-content-centeron your column div. This will center everything inside that column.
使用d-flex justify-content-center你的列格。这将使该列内的所有内容居中。
<div class="row">
<div class="col-4 d-flex justify-content-center">
// Image
</div>
</div>
If you have text inside the column, and you want to align all that to center. Just add text-centerto the same class.
如果列中有文本，并且希望将所有文本居中对齐。只需添加text-center到同一类。
<div class="row">
<div class="col-4 d-flex justify-content-center text-center">
// for image and text
</div>
</div>
回答by Sidriel
Bootstrap naming conventions carry styles of their own, col-XS-1 refers to a column being 8.33% of the containing element wide. Your text, would most likely expand far beyond the specified width, and couldn't possible be centered within it. If you wanted it to constrain to the div, you could use something like css word-break.
Bootstrap 命名约定带有自己的样式，col-XS-1 指的是包含元素宽度的 8.33% 的列。您的文本很可能会远远超出指定的宽度，并且不可能在其中居中。如果您希望它限制到 div，您可以使用类似 css word-break 的东西。
For centering the content within an element large enough to expand beyond the text, you have two options.
要将内容居中放置在足够大的元素中以扩展到文本之外，您有两种选择。
Option 1: HTML Center Tag
选项 1：HTML 中心标签
<div class="row">
<div class="col-xs-1 center-block">
<center>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</center>
</div>
</div>
Option 2: CSS Text-Align
选项 2：CSS 文本对齐
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
If you wanted everything to constrain to the width of the column
如果您希望所有内容都限制在列的宽度
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
UPDATE - Using Bootstrap's text-center class
更新 - 使用 Bootstrap 的文本中心类
<div class="row">
<div class="col-xs-1 center-block text-center">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
FlexBox Method
FlexBox 方法
<div class="row">
<div class="flexBox" style="
display: flex;
flex-flow: row wrap;
justify-content: center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
回答by Chris Kelker
No need to complicate things. With Bootstrap 4, you can simply align items horizontally inside a column using the margin auto class my-auto
没有必要把事情复杂化。使用 Bootstrap 4，您可以使用 margin auto 类简单地在列内水平对齐项目my-auto
<div class="col-md-6 my-auto">
<h3>Lorem ipsum.</h3>
</div>
回答by kiranvj
Bootstrap 4, horizontal and vertical align contents using flex box
Bootstrap 4，使用弹性框水平和垂直对齐内容
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>
Use bootstrap class align-items-centerand justify-content-center
使用引导类align-items-center和 justify-content-center
.page-hero {
height: 200px;
background-color: grey;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>回答by cgalev
Use text-centerinstead of center-block.
使用text-center代替center-block。
Or use center-blockon the span element (I did the column wider so you can see the alignment better):
或者center-block在 span 元素上使用（我将列加宽，以便您可以更好地看到对齐方式）：
<div class="row">
<div class="col-xs-10" style="background-color:#123;">
<span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
</div>
</div>
回答by Eljeddi Oussema
//add this to your css
.myClass{
margin 0 auto;
}
// add the class to the span tag( could add it to the div and not using a span
// at all
<div class="row">
<div class="col-xs-1 center-block">
<span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
回答by xicooc
col-lg-4 col-md-6 col-sm-8 col-11 mx-auto
col-lg-4 col-md-6 col-sm-8 col-11 mx-auto
1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
2. col-md-6 ≥ 970px (popular 1024, 1200)
3. col-sm-8 ≥ 768px (popular 800, 768)
4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
5. mx-auto = always block center
