Shulou(Shulou.com)06/03 Report--

The example analysis of setting the vertical center of the picture with unknown height in the front end of web. In view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Standard browsers still set the display mode of the external container # box to display:table-cell,IE6/IE7 by inserting a pair of empty tags in front of the img tag

However, the actual effect achieved in the browser is not perfect, because the parsing of each browser is different, so there will be a deviation of 1px-3px in each browser.

Method 1:

The method is to set the display mode of the external container to display:table,img tags and then nest a span tag outside, and set the display mode of span to display:table-cell, so that you can easily use vertical-align to align like table elements, of course, this is only in the standard browser, IE6/IE7 also has to use positioning.

HTML code

CSS code

# box {

Width:500px;height:400px

Display:table

Text-align:center

Border:1px solid # d3d3d3bxxxxxxxxxx

}

# box span {

Display:table-cell

Vertical-align:middle

}

# box img {

Border:1px solid # ccc

}

Method 2:

The principle of the implementation of method 2 and method 1 is more or less the same, and the structure is also the same. method 1 uses conditional annotations and method 2 uses CSS Hack.

CSS code

# box {

Width:500px;height:400px

Overflow:hidden

Position:relative

Display:table-cell

Text-align:center

Vertical-align:middle

Border:1px solid # d3d3d3bxxxxxxxxxx

}

# box span {

Position:static

* position:absolute; / * Hack*/ for IE6/7

Top:50%; / * Hack*/ for IE6/7

}

# box img {

Position:static

* position:relative; / * Hack*/ for IE6/7

Top:-50%;left:-50%; / * Hack*/ for IE6/7

Border:1px solid # ccc

}

The drawback of this method is that in standard browsers, the external container # box cannot use the margin property because the display mode of the external container # box is display:table-cell, and setting the border under IE8 is not valid.

Method 3:

Standard browsers still set the display mode of the external container # box to display:table-cell,IE6/IE7 by inserting a pair of empty tags in front of the img tag.

HTML code

XML/HTML Code copies content to the clipboard

CSS code

# box {

Width:500px;height:400px

Display:table-cell

Text-align:center

Vertical-align:middle

Border:1px solid # d3d3d3bxxxxxxxxxx

}

# box img {

Border:1px solid # ccc

}

Method 4:

Wrap a p tag around the img tag. Standard browsers use the pseudo-class attribute of the p tag: before, and IE6/IE7 uses CSS expressions to achieve compatibility.

HTML code

CSS code

# box {

Width:500px;height:400px

Text-align:center

Border:1px solid # d3d3d3bxxxxxxxxxx

}

# box p {

Width:500px;height:400px

Line-height:400px; / * Row height equals height * /

}

/ * compatible standard browsers * /

# box p:before {

Content: "." / *? The specific value has nothing to do with vertical centering, so save characters * / as much as possible.

Margin-left:-5px; font-size:10px; / * repair the small BUG in the center * /

Visibility:hidden; / * set to Hidden element * /

}

# box p img {

* margin-top:_expression ((400-this.height) / 2); / * CSS expression is used to be compatible with IE6/IE7 * /

Vertical-align:middle

Border:1px solid # ccc

}

Use: beforr this method is quite powerful for standard browsers, and there are no side effects, but for IE6/IE7, if the performance requirements are high, then the method of CSS expression should be used with caution.

Method 5:

This method is aimed at IE6/IE7, the font size of the external container of the image can be set to 0.873 times the height to achieve the center, the standard browser still uses the above method to achieve compatibility, and the structure is more elegant.

HTML code

CSS code

# box {

Width:500px;height:400px

Text-align:center

Border:1px solid # d3d3d3bxxxxxxxxxx

/ * compatible standard browsers * /

Display: table-cell

Vertical-align:middle

/ * compatible with IE6/IE7 * /

* display:block

* font-size:349px; / * the font size is about 0.873 times the height of the container.

* font-family:Arial; / * prevent hack failures caused by non-utf-8, such as gbk coding * /

}

# box img {

Vertical-align:middle

}

The method of setting font size feels weird, and I don't see a reasonable explanation, except that the image element has some characteristics that are different from other elements, but for IE6/IE7, this method is quite powerful.

Consider: many methods rely on setting the display mode of the external container to table to achieve vertical centering, that is, div to simulate table. It would be nice if CSS had a property to achieve this effect.

This is the answer to the example analysis question about the vertical center of the picture with unknown height set in the front end of web. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.