Home > Web Front-end > Bootstrap Tutorial > How to center images in bootstrap

How to center images in bootstrap

(*-*)浩
Release: 2019-07-18 09:59:02
Original
9087 people have browsed it

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

How to center images in bootstrap

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:

<p><img class="img-responsive center-block" src="..." /></p>
Copy after login

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

For example, the code below cannot center the image.

<div class="center-block"><img class="img-responsive" src="..." /></div>
Copy after login

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

<p class="text-center"><img src="..."></p>
Copy after login

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 images in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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 Issues
There is no bootstrap custom video tutorial
From 1970-01-01 08:00:00
0
0
0
Laravel: Problem using bootstrap locally
From 1970-01-01 08:00:00
0
0
0
html5 - Problem with bootstrap modifying style
From 1970-01-01 08:00:00
0
0
0
Introducing bootstrap is invalid
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template