如何在Bootstrap列中居中图像

Question

我在bootstrap列中有几个图像,如下所示:

<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.我.services-section img在这样的CSS 风格:

CSS:

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

我也尝试添加各种风格的这一类- ,,float:none; -他们都没有任何效果.我也尝试给图像一个类 - 并做margin:auto;vertical-align:middle;.middle

.middle {
text-align: center;
}

在CSS但但也没有效果.

我不想使用,margin-left: 30px;但我不知道如何将图像推向列的中心.感谢您提出任何其他建议,该网站现已上线:

http://nowordpress.gatewaywebdesign.com/

Answer 1

添加 display: block,margin: auto;它将成功

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