如何在 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-->

如您所见，每一列的 class 也被赋予了 services-section。我在 CSS 中设置了 .services-section img 的样式：

CSS:

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

并且我已经尝试向其中添加各种样式 class - float:none;、margin:auto;、vertical-align:middle; - none 其中有任何效果.我也尝试给图像一个 class - .middle 并做

.middle {
text-align: center;
}

在 CSS 但那也没有效果。

我不想使用 margin-left: 30px;，但我不知道还有什么方法可以将图像推向其列的中心。感谢您提出任何其他建议，该网站已上线：

http://nowordpress.gatewaywebdesign.com/

Answer 1

仅像这样在 .services-section 上设置文本对齐：

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

CodePen Example here

Answer 2

添加 display: block 和 margin: auto; 就可以了

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

如何在 Bootstrap 列中居中图像

How To Center Image Within Bootstrap Column

html

css

image

centering

twitter-bootstrap