twitter-bootstrap 如何在引导程序中将 div 置于 col-md-12 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38163437/
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 div within col-md-12 in bootstrap
提问by mrkkr91
I have problem with centering components within col-md-12. For example I have 12 columns with <h1>or <h2>inside. I want to <h1>to be centered.
我在将组件居中时遇到问题col-md-12。例如，我有 12 列有<h1>或有<h2>内部。我想<h1>成为中心。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1>Something</h1>
</div>
</div>
</div>
</div>I tried to access css class text-centeror block-centerto divs, but everytime <h1>was floated to the left. I need have this centered and set padding on my own. How can I solve this?
我试图访问 css 类text-center或block-centerdiv，但每次<h1>都向左浮动。我需要自己居中并设置填充。我该如何解决这个问题？
回答by Lucian
<div class="col-md-12 text-center">works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-centerfor h1seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :beforeor :after
<div class="col-md-12 text-center">适用于引导程序，无需添加任何样式，除非您已经为h1. 即使是这种情况，您也可以使用.text-centerforh1似乎您在该父 div 中使用宽度。如果您需要内容为 100% 宽度，请不要这样做。并且根据背景，如果您需要 100% 的区域占据背景，您可以简单地在 div 中使用它，如果没有，您最好将它与一些伪类一起使用:before或:after
回答by mrkkr91
In bootstrap 4
在引导程序 4
I know it's not the direct answer to this question but it may help someone
我知道这不是这个问题的直接答案，但它可能会帮助某人
to center the childs horizontally, use bootstrap-4 class
到水平居中儿童的，使用自举-4类
justify-content-center
to center the childs vertically, use bootstrap-4 class
要垂直居中孩子，请使用 bootstrap-4 类
align-items-center
but remember don't forget to use d-flex class with these it's a bootstrap-4 utility class, like so
但请记住不要忘记将 d-flex 类与这些一起使用，它是一个 bootstrap-4 实用程序类，就像这样
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
copy and paste this snippet to check how it works
复制并粘贴此代码段以检查它是如何工作的
Note:make sure to add bootstrap-4 utilities if this code does not work.
注意：如果此代码不起作用，请确保添加 bootstrap-4 实用程序。
Hope this will help someone.
希望这会帮助某人。
回答by Mayur Vijay Kathale
Add class="text-center" to div.
将 class="text-center" 添加到 div。
<div id="naglowek" class="text-center">
<h1>Something</h1>
</div>
text-center class is from bootstrap.
text-center 类来自引导程序。
回答by jrummell
You can add the text-centerclass to the h1.
您可以将text-center类添加到 h1。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1 class="text-center">Something</h1>
</div>
</div>
</div>
</div>