Vertical center of images with unknown height

ArticleDirectory

• Method 1:
• HTML structure:
• CSS style section:
• Method 2:
• CSS style section:
• Method 3:
• HTML structure:
• CSS style section:
• Method 4:
• HTML structure:
• CSS style section:
• Method 5:
• HTML structure:
• CSS style section:

The width and height of the image are unknown and there is no fixed size. On this premise, the image must be vertically centered in a container with fixed width and height. This is the requirement for the projects that are currently in progress, so we have collected some common methods.

It is ideal. The width and height of the external container are fixed. The width and height of the image in the middle are unknown, but the image must always be vertically centered relative to the external container.

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

Method 1:

This method sets the display mode of the external container to display: Table, the IMG label is nested with a span label, and the display mode of the span is set to display: Table-cell, in this way, we can easily use vertical-align to align like table elements. Of course, this is only because IE6/IE7 still needs to be positioned in a standard browser.

HTML structure:

<Div id = "box"> <span>  </span> </div>
 

CSS style section:

 
<Style type = "text/CSS"> # box {width: 500px; Height: 400px; display: Table; text-align: center; Border: 1px solid # d3d3d3; Background: # fff ;}# box span {display: Table-cell; Vertical-align: middle ;}# box IMG {border: 1px solid # CCC ;}</style> <! -- [If lte ie 7]> <style type = "text/CSS"> # box {position: relative; overflow: hidden ;}# box span {position: absolute; left: 50%; top: 50% ;}# box IMG {position: relative; left:-50%; top:-50% ;}</style> <! [Endif] -->
 

Method 2:

The implementation principles of method 2 and method 1 are similar and the structure is the same. method 1 uses conditional comments and method 2 uses CSS hack.

CSS style section:

<Style type = "text/CSS"> # box {width: 500px; Height: 400px; overflow: hidden; position: relative; display: Table-cell; text-align: center; Vertical-align: middle; Border: 1px solid # d3d3d3; Background: # fff ;}# box span {position: static; * position: absolute; /* hack */top: 50% for IE6/7;/* 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 ;} </style>
 

This method has a disadvantage. In a standard browser, the # Box attribute cannot be used because the display mode of the external container # box is display: Table-cell, in addition, setting the border in IE8 is invalid.

Method 3:

The standard browser still sets the display mode of the external container # box to display: Table-cell. IE6/IE7 inserts an empty label before the IMG label.

HTML structure:

 
<Div id = "box"> <I> </I>  </div>
 

CSS style section:

<Style type = "text/CSS"> # box {width: 500px; Height: 400px; display: Table-cell; text-align: center; Vertical-align: middle; border: 1px solid # d3d3d3; Background: # fff ;}# box IMG {border: 1px solid # CCC ;}</style> <! -- [If IE]> <style type = "text/CSS"> # box I {display: inline-block; Height: 100%; Vertical-align: middle} # Box IMG {vertical-align: middle} </style> <! [Endif] -->
 

Method 4:

Wrap a p tag outside the IMG tag. The standard browser uses the pseudo-class attribute of the P Tag: Before to implement this. IE6/IE7 uses CSS expressions for compatibility.

HTML structure:

 
<Div id = "box"> <p>  </P> </div>
 

CSS style section:

# Box {width: 500px; Height: 400px; text-align: center; Border: 1px solid # d3d3d3; Background: # fff ;}# box P {width: 500px; height: 400px; line-Height: 400px;/* The Row Height equals the height */}/* compatible with standard browsers */# Box P: Before {content :". ";/* the specific value is irrelevant to the vertical center, saving characters as much as possible */margin-left:-5px; font-size: 10px; /* fixed the center bug */visibility: hidden;/* set it to a hidden element */} # Box p img {* margin-top: expression (400-this. height)/2);/* CSS expressions are used to be compatible with IE6/IE7 */vertical-align: middle; Border: 1px solid # CCC ;}
 

Use: beforr is quite powerful for standard browsers and has no side effects. However, for IE6/IE7, if the performance requirement is high, the CSS expression method should be used with caution.

Method 5:

For IE6/IE7, this method sets the font size of the image external container to 0.873 times the height to achieve center. The standard browser still uses the above method for compatibility, the structure is also elegant.

HTML structure:

 
<Div id = "box">  </div>
 

CSS style section:

# Box {width: 500px; Height: 400px; text-align: center; Border: 1px solid # d3d3d3; Background: # FFF;/* compatible with 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 of the container height 400*0.873 = 349 */* font-family: Arial;/* prevents hack failure caused by non-UTF-8, for example, GBK encoding */} # Box IMG {vertical-align: middle ;}
 

The method for setting the font size is weird, and I didn't see a reasonable explanation. I only know that the image elements have some characteristics different from other elements, but for IE6/IE7, this method is quite powerful.

Thinking: many methods rely on setting the external container display mode to table to realize vertical center, that is, div to simulate table, it would be nice if CSS has an attribute to achieve this effect. If you have any good methods, please share them with us. Some of the methods come from the Internet and are tested and organized by sleep with a knife.