Menu
Aligning images block -level images can be centered using the . mx-auto margin utility class. <img src="..." class="rounded float-left" alt="..."> <img src="..." class="rounded float-right" alt="..."> <img src="..." class="rounded mx-auto d-block" alt="...">
By default, images are display:inline . If you only want the center the image (and not the other column content), make the image display:block using the d-block class, and then mx-auto will work.
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
Add . d-flex . justify-content-center . align-items-center-center classes to the parent element of the image to center it vertically and horizontally.
Twitter Bootstrap v3.0.3 has a class: center-block
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
Just need to add a class .center-block in the img tag, looks like this
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
In Bootstrap already has css style call .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
You can see a sample from here
The correct way of doing this is
<div class="row text-center">
<img ...>
</div>
Update 2018
The center-block class no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...
<img src="..." class="mx-auto d-block"/>
Add 'center-block' to image as class - no additional css needed
<img src="images/default.jpg" class="center-block img-responsive"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With