Css enables vertical top, bottom, left, and center display of images

The previous Taobao UED recruitment involves the following questions:

"Using pure CSS to implement images of unknown sizes (but the height and width are smaller than 200px) is in the center of the water in a 200px square container ."

Of course, the question is not random, but is due to its actual reasons. Vertical center is the most common problem in Taobao's work and is very representative.

There are two difficulties:

Vertical center;

An image is a replacement element and has some special features.
As for how to solve the problem, the following is a simple solution to weigh the relatively clean structure of CSS:

The code is as follows:

Copy code

. Box { /* Vertical Center method recognized by mainstream non-IE browsers */ Display: table-cell; Vertical-align: middle; /* Set the horizontal center */ Text-align: center; /* Hack for IE */ * Display: block; * Font-size: 175px;/* it is about 0.873 of the height, and 200*0.873 is about 175 */ * Font-family: Arial;/* prevents hack failures caused by non-UTF-8, such as gbk encoding */ Width: 200px; Height: 200px; Border: 1px solid # eee; } . Box img { /* Set the vertical center of the image */ Vertical-align: middle; } <Div class = "box"> </Div>

Method 2:

This method uses an empty span tag as the vertical center hook.
Note that if the span label and img label in the div label are not in the same line and are not closely written together, you need to add font-size to the outer div: 0;
To add font-size: 0, some browsers generate a "character" for line breaks and spaces.

XHTML code structure:

The code is as follows:	Copy code
<Div class = "test_box"> <span class = "hook"> </span> <a href = "http://mb.111cn.net/" target = "_ blank"> </a> </div>

CSS code style :.

The code is as follows:	Copy code
Test_box {width: 200px; height: 200px; overflow: hidden; text-align: center; font-size: 0; border: 1px solid #000000 ;} . Test_box. hook {display: inline-block; width: 0; height: 100%; overflow: hidden; margin-left:-1px; font-size: 0; line-height: 0; vertical-align: middle ;} . Test_box img {vertical-align: middle; border: 0 none ;}

Method 3: vertically centered tabel_cell

In different encoding modes, the line height of the text is different, so remember to select the encoding relative to the page
This method uses the display: table-cell method in browsers that support this attribute and vertial-align: middle to vertically center the image;
Vertical center is implemented in browsers (IE) that do not support display: table-cell by combining text with row height;
The display: table-cell attribute will invalidate some attributes, such as margin. Therefore, this method is used to make the image live vertically, when multiple images are involved, you may need to copy the following XHTML structure to the li structure;

XHTML code structure:

The code is as follows:	Copy code
<Div class = "test_box"> </div>

CSS code style:

The code is as follows:	Copy code
. Test_box {display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center; * float: left; * font-family: simsun; * font-size: 200px; * line-height: 1; border: 1px solid #000000 ;}. test_box img {vertical-align: middle ;}