Html 如何在 Bootstrap 列中居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44055130/
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 Image Within Bootstrap Column
提问by HappyHands31
I have several images within bootstrap columns like this:
我在引导列中有几个图像，如下所示：
<div class="services">
<div class="container">
<div class="row">
<div class="col-md-3 services-section">
<img src="/images/website_design_icon.png"/>
<div class="services-paragraph">
<h3>Website Design</h3>
<p>WordPress themes built for design and functionality</p>
</div>
</div>
<div class="col-md-3 services-section">
<img src="/images/graphic_design_icon.png"/>
<div class="services-paragraph">
<h3>Graphic Design</h3>
<p>Logo designs for identity and print</p>
</div>
</div>
<div class="col-md-3 services-section">
<img src="/images/search_engine_marketing_icon.png"/>
<div class="services-paragraph">
<h3>Search Engine Marketing</h3>
<p>SEO strategies and PPC solutions to increase your presence online</p>
</div>
</div>
<div class="col-md-3 services-section">
<img src="/images/wordpress_conversion_icon.png"/>
<div class="services-paragraph">
<h3>WordPress Conversion</h3>
<p>Take advantage of the number-one CMS in Web Design to liberate your business</p>
</div>
</div>
</div><!--/Row-->
</div><!--/Container-->
</div><!--/Services-->
As you can see each column has also been given a class of services-section. I've styled .services-section imgin the CSS like this:
正如您所看到的，每一列也被赋予了一个services-section. 我.services-section img在 CSS 中设置了这样的样式：
CSS:
CSS：
.services-section img {
text-align: center;
width: 90px;
height: 90px;
}
And I've tried adding various styles to this class - float:none;, margin:auto;, vertical-align:middle;- none of them have had any effect. I also tried giving the image a class - .middleand doing
我已经尝试向这个类添加各种样式 - float:none;, margin:auto;, vertical-align:middle;- 它们都没有任何效果。我也尝试给图像一个类 -.middle并做
.middle {
text-align: center;
}
In the CSS but that also had no effect.
在 CSS 中，但这也没有效果。
I don't want to use margin-left: 30px;but I don't know how else to push the images towards the center of their columns. Thanks for any other suggestions, the site is live here:
我不想使用margin-left: 30px;但我不知道如何将图像推向其列的中心。感谢您的任何其他建议，该网站在这里：
回答by Jyoti Pathania
Add display: blockand margin: auto;it will do the trick
添加 display: block，margin: auto;它会做的伎俩
.services-section img {
width: 90px;
height: 90px;
margin: auto;
display: block;
}
回答by cpcdev
set text-align on .services-section only like so:
仅在 .services-section 上设置 text-align ，如下所示：
.services-section {
text-align: center;
}
