How to Perfectly Center an Image on a Page Using Bootstrap\'s .center-block Class?

Aligning an Image Perfectly in the Center of a Page Using Bootstrap

When working with Twitter Bootstrap, centering an image horizontally may not always be straightforward. This article presents a solution using the Bootstrap class, .center-block, to effortlessly align images dead center with the page.

Understanding the .center-block Class

The .center-block class in Twitter Bootstrap v3.0.3 is specifically designed for aligning block elements in the center of a page. It sets the display property to block and adjusts the margins (margin-left and margin-right) to auto, ensuring that the element is centered both horizontally and vertically.

Aligning an Image using .center-block

To center an image using .center-block, simply add the class to the img tag within a row. For instance:

<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>

The .center-block class style sheet defines the following:

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

Example

For a live demonstration, you can visit the following sample page:

[Sample Page](URL)

By utilizing the .center-block class, you can effortlessly align any image dead center with the page, ensuring a visually pleasing and balanced layout.

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