如何在Bootstrap列中居中放置图像 [英] How To Center Image Within Bootstrap Column

问题描述

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

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:

http://nowordpress.gatewaywebdesign.com/

推荐答案

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

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

这篇关于如何在Bootstrap列中居中放置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！