How to Perfectly Center an Image in Bootstrap Using .center-block?

Aligning an Image Perfectly Center with Bootstrap

When using the Bootstrap framework, centering an image horizontally can be a bit of a challenge. However, there is an easy solution using the built-in class .center-block.

CSS Class: .center-block

The .center-block class, introduced in Twitter Bootstrap v3.0.3, centers content blocks horizontally using margin. It can be used as a mixin or a class.

Usage

To center an image using .center-block, simply add the class to the img tag:

<code class="html"><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></code>

CSS

The .center-block class has the following CSS properties:

<code class="css">.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }</code>

These properties set the image to display as a block element and center it on the page by applying equal margins on both sides.

Example

You can view a live example of an image centered using .center-block at: [sample URL here]

The above is the detailed content of How to Perfectly Center an Image in Bootstrap Using .center-block?. For more information, please follow other related articles on the PHP Chinese website!