How to center bootstrap responsive layout images

The Bootstrap framework is really convenient for making responsive websites (or responsive web page layout), especially for images. You can use a css class .img-responsive to achieve responsiveness (automatically scale with the screen, let’s do this) Understand), one line of code is implemented, just like using html tags, there is no need to consider logic.

is as follows: (Recommended learning: Bootstrap video tutorial)

class=”img-responsive”

Responsive image How to center?

Image centering is often used in web page production, so how to center responsive images? It’s also very simple, just use a css class .center-block. The code is as follows:

class=”img-responsive center-block”

This line of code makes the image responsive and centered. so easy!

But problems will come!

1. What about the .text-center class commonly used in Bootstrap (can the responsive image be centered)?

The answer is: Normally, the .text-center class is used to center text. It will work for non-responsive images, but not for responsive images.

2. Will changing the position of the .center-block class affect the centering of the responsive image?

The answer is: yes.

Why?

Don’t ask so many questions. The codes marked in red above are correct and standard. Collect the core skills of responsive image centering on this page, and you can copy them when needed when making a website.

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