如何在引导列中居中图像[重复]

Posted 2023-03-05

【中文标题】如何在引导列中居中图像[重复]

【英文标题】：How To Center Image Within Bootstrap Column [duplicate]

【发布时间】：2017-10-18 16:52:51

【问题描述】：

我在引导列中有几个像这样的图像：

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

【问题讨论】：

仅在 .services-section 上设置文本对齐

【参考方案1】：

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

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

【讨论】：

这也有效，这样我就不必从.services-section img 中删除img - 谢谢。

@HappyHands31 欢迎您 :)

你也可以把class="d-block m-auto"放在你的img标签上。

【参考方案2】：

仅像这样在 .services-section 上设置 text-align：

.services-section 
    text-align: center;

CodePen Example here