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类。我在CSS中设置了.services-section img样式：

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

Answer 2

在.services-section上设置text-align只是这样：

.services-section {
    text-align: center;
}

CodePen Example here

如何在Bootstrap列中居中图像

2 个答案: