Home > Web Front-end > CSS Tutorial > How to Perfectly Center an Image on a Page Using Bootstrap\'s .center-block Class?

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

Patricia Arquette
Release: 2024-10-27 11:43:02
Original
746 people have browsed it

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>
Copy after login

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

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template