Stopbyte

How to horizontally center an image within a div using Bootstrap

Web Development HTML
#1

I am trying to center an image <img “Horizontally” within a div using twitter bootstrap.

How can I dynamically center an image within a div?!

2 Likes
#2

Bootstrap has a new class named center-block starting from Bootstrap version 3.0.3

Considering this as your image, you can simply add the center-block CSS class to your image to center it horizontally within your container:

<div class="col-lg-12">
   <img class="center-block" src="myImage.png" />
</div>

In case you are using an older version of bootstrap here is the center-block class implementation you can implement it within your CSS stylesheets:

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Hope this helps to solve your problem.

1 Like