我在引导列中有几个图像,如下所示:
I have several images within bootstrap columns like this:
<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的样式,如下所示:
As you can see each column has also been given a class of services-section. I've styled .services-section img in the CSS like this:
CSS:
.services-section img { text-align: center; width: 90px; height: 90px; }并且我尝试为此类添加各种样式-float:none;,margin:auto;,vertical-align:middle;-它们都没有任何作用.我还尝试过为图像提供一个类-.middle并进行
And I've tried adding various styles to this class - float:none;, margin:auto;, vertical-align:middle; - none of them have had any effect. I also tried giving the image a class - .middle and doing
.middle { text-align: center; }但是在CSS中却没有效果.
In the CSS but that also had no effect.
我不想使用margin-left: 30px;,但是我不知道如何将图像推向其列的中心.感谢您提出任何其他建议,该网站位于此处:
I don't want to use margin-left: 30px; but I don't know how else to push the images towards the center of their columns. Thanks for any other suggestions, the site is live here:
nowordpress.gatewaywebdesign/
推荐答案添加display: block和margin: auto;可以解决问题
.services-section img { width: 90px; height: 90px; margin: auto; display: block; }更多推荐
如何在Bootstrap列中居中放置图像
发布评论