gpt4 book ai didi

html - 如何在 Bootstrap 列中居中图像

转载 作者:太空宇宙 更新时间:2023-11-04 13:34:29 29 4
gpt4 key购买 nike

<分区>

我在这样的 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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com