如何在Bootstrap列中居中放置图像

本文介绍了如何在Bootstrap列中居中放置图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在引导列中有几个图像，如下所示:

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-->

如您所见，每一列也被赋予了services-section类.我在CSS中设置了.services-section img的样式，如下所示:

As you can see each column has also been given a class of services-section. I've styled .services-section img in the CSS like this:

CSS:

.services-section img { text-align: center; width: 90px; height: 90px; }

并且我尝试为此类添加各种样式-float:none;，margin:auto;，vertical-align:middle;-它们都没有任何作用.我还尝试过为图像提供一个类-.middle并进行

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 - .middle and doing

.middle { text-align: center; }

但是在CSS中却没有效果.

In the CSS but that also had no effect.

我不想使用margin-left: 30px;，但是我不知道如何将图像推向其列的中心.感谢您提出任何其他建议，该网站位于此处:

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:

nowordpress.gatewaywebdesign/

推荐答案

添加display: block和margin: auto;可以解决问题

.services-section img { width: 90px; height: 90px; margin: auto; display: block; }