How To Center Image Within Bootstrap Column
Solution 1
Add display: block
and margin: auto;
it will do the trick
.services-section img {
width: 90px;
height: 90px;
margin: auto;
display: block;
}
Solution 2
set text-align on .services-section only like so:
.services-section {
text-align: center;
}
HappyHands31
UX web designer, frontend developer, HTML, CSS, JavaScript, Python, C#, PHP, WordPress, and Adobe Creative Suite experience. gatewaywebdesign.com.
Updated on May 19, 2020Comments
-
HappyHands31 almost 4 years
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-->
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; }
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; }
In the CSS but that also had no effect.
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:-
cpcdev almost 7 yearsset text-align on .services-section only
-
-
HappyHands31 almost 7 yearsThis also works and this way I don't have to get rid of
img
from.services-section img
- thank you. -
Jyoti Pathania almost 7 years@HappyHands31 Your Welcome :)
-
Relisora over 4 yearsYou can also put
class="d-block m-auto"
on your img tag. -
gdvalderrama about 2 yearsThis is actually documented, at least in v5: getbootstrap.com/docs/5.1/content/images/#aligning-images using the helper clases d-block for display: block and mx-auto for margin auto (left and right)