How to Vertically Center an Image in Bootstrap?

How to Center an Image Vertically in Bootstrap

Centering an image horizontally in Bootstrap can be achieved in a variety of ways.

Method 1: Using the Center-Block Class

Twitter Bootstrap v3.0.3 introduces the center-block class for this purpose. It sets the element to display: block and centers it via margin.

To use this method:

1. Add the class center-block to the img tag:

<code class="html"><img class="center-block" src="logo.png" /></code>

Method 2: Using the Grid System

Alternatively, you can use the Bootstrap grid system to split the row into three equal blocks:

<code class="html"><div class="row">
  <div class="col-4"></div>
  <div class="col-4"><img src="logo.png" /></div>
  <div class="col-4"></div>
</div></code>

This method will also center the image horizontally within the row.

To center the image vertically, you can additionally use CSS to set the image to display inline-block and provide it with a margin-top equal to half the height of the image:

<code class="css">img {
  display: inline-block;
  margin-top: -(image-height / 2);
}</code>

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