Detailed explanation of an example of vertical centering of unknown size images using pure CSS

1. Taobao’s method

There was such a question in the previous "Taobao UED Recruitment":

"Use pure CSS to implement images of unknown size (but the height and width Both are less than 200px) horizontally and vertically centered in a 200px square container. "

Of course, the question is not arbitrary, but has its own practical reasons. Vertical centering is a problem most commonly encountered in Taobao work. , very representative.

The difficulty of the question lies in two points:

Vertical centering;
The picture is a replacement element with some special characteristics.
As for how to solve it, here’s a trade-off of a relatively clean, CSS-simple solution:

.box {

display: table-cell;
vertical-align: middle;

text-align:center;

*display: block;
*font-size: 175px;
*font-family:Arial ;

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {

vertical-align:middle ;
}

2. Background method

The background method is simple but not Pictures that are conducive to dynamic import

3. Background method

.qq {
width:500px;
display:table-cell;
height:400px;
text-align:center;
vertical-align:middle;
border: 1px solid #000
}
i {
display:inline-block;
height:100%;
 vertical-align:middle
}
.qq img {
 vertical-align:middle;
}

This kind The method is also very simple, but you need to add an extra tag of

If the page needs one or two centered pictures, then this method is recommended, but if there are many pictures of products, then add the tag The number is relatively large

Other solutions, interested friends can poke:

div{
height: 400px;
line-height: 400px;
overflow: hidden;
}

This method is also only applicable to a single line of text or image + text, usually used for links or titles with small icons in front wait.

The above is the detailed content of Detailed explanation of an example of vertical centering of unknown size images using pure CSS. For more information, please follow other related articles on the PHP Chinese website!