How to center images in bootstrap

When we use bootstrap to layout content, sometimes we need pictures to be displayed horizontally and centered in the content.

Generally,our images use the .img-responsive class to implement image responsiveness.(Recommended learning:Bootstrap video tutorial)

If you need to achieve horizontal centering of responsive images, then we must use the .center-block class instead of .text- center

Using the .center-block class to achieve horizontal centering of responsive images:

Note: Placement of the.center-block class Location. It must be placed in thetag. If it is placed in the outer layer, centering cannot be achieved.

For example, the code below cannot center the image.

If the image does not add the responsive class .img-responsive, then wecan also use .text-center to center the image:

For more technical articles related to Bootstrap, please visit theBootstrap Tutorialcolumn to learn!

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