How to center the image in bootstrap

If you are using Bootstrap 3, you may encounter such a problem. You can use .text-center to center-align the text, but the image cannot be centered. To solve this problem The problem is that you may need to do a lot of things, such as adding a div outside the img, and then adjusting the image width, height, etc.

There is a very simple method in Bootstrap 3 to achieve responsive horizontal and vertical center alignment of images. Just add the css class img-responsive center-block to the image to achieve it. Let’s take a look Take a look.

To align images in Bootstrap 3, you can try the following code:

Introduction to Bootstrap v3.0.1. Using the center-block class you can align the figure to the center of the container. The following is an example:

<img  class="img-responsive center-block lazy"  src="/static/imghwm/default1.png"  data-src="图片地址"    / alt="How to center the image in bootstrap" >

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to center the image in bootstrap. For more information, please follow other related articles on the PHP Chinese website!