How to set vertical Center for pictures with unknown heights

This article mainly describes the unknown height of the picture to set the vertical center of the method, in practice, pay special attention to the display of Internet Explorer, the need for friends can refer to the following

The standard browser also sets 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

But the actual effect in the browser is not perfect, because each browser parsing is different, so in each browser will have 1px-3px deviation.
Method One:

The method is to set the display mode of the external container to the outside of the display:table,img label and then nest a span label, and set the display mode of span to Display:table-cell, This makes it easy to use vertical-align like table elements to align, of course, this is only in the standard browser, IE6/IE7 also need to use positioning.
HTML code

<p id= "box" ><span></span></p>

CSS Code

<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 Two:

Method Two and method one realization principle is similar, the structure is also the same, the method uses the conditional annotation, the method two uses the 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 #d3d3d3; background: #fff;   }   #box span{       position:static;       *position:absolute; /* for IE6/7 hack*/    top:50%;/* for IE6/7 hack*/}   #box img {       position:static;       *position:relative; /* hack*/top:-50%;left:-50% for IE6/7,/    * hack*/    border:1px solid #ccc for IE6/7;   }

This method has a disadvantage, in the standard browser because the external container #box display mode is Display:table-cell, so #box cannot use the margin property, and set the border under IE8 is not valid.
Method Three:

The standard browser also sets 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

<p id= "box" >    <i></i></p>

CSS Code

<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 Four:

Wrapping a P tag outside the IMG tag, the standard browser uses the pseudo-class attribute of P tag: Before, Ie6/ie7 uses the CSS expression to achieve compatibility.
HTML code

<p id= "box" >    <p></p></p>

CSS Code

#box {       width:500px;height:400px;       Text-align:center;       border:1px solid #d3d3d3; background: #fff;   }   #box p{       width:500px;height:400px;       line-height:400px; /* Row higher than height */}/   * compatible with standard browser */#box p:before{       content: ".";/* <a href= "http://casinogreece.gr/" >???????????? </a> the specific value is independent of the vertical center, save the characters as much as possible */    margin-left:-5px; font-size:10px;/* Fix the minor bug in the center */    Visibility:hidden;/* Set as hidden element *   /} #box P img{       *margin-top:expression ((400-this.height)/2);/* CSS expression for compatibility with ie6/ie7 *    / Vertical-align:middle;       border:1px solid #ccc;   }

Use: Beforr This method for the standard browser compared to the force, also did not find any side effects, but for IE6/IE7, if the performance requirements of the high-level CSS expression method to use caution.
Method Five:

This method for Ie6/ie7, the font size of the external container of the picture is set to 0.873 times times the height of the center can be achieved, standard browser or the method used above to achieve compatibility, and the structure is more elegant.
HTML code

<p id= "box" >    </p>

CSS Code

#box {       width:500px;height:400px;       Text-align:center;       border:1px solid #d3d3d3; background: #fff;       /* Compatible with standard browser */    Display:table-cell;    Vertical-align:middle;       /* Compatible with IE6/IE7 */    *display:block;       *font-size:349px; /* The font size is approximately 0.873 times times the container height 400*0.873 = 349 */    *font-family:arial;/* prevent hack failures caused by non-utf-8, such as GBK encoding */}   #box img{       Vertical-align:middle;   }

The method of setting the font size feels rather strange, does not see a reasonable explanation, only know that the picture element has some different characteristics from other elements, but for Ie6/ie7, this method is still compared to the force.
Think: Many methods rely on setting the display mode of the external container to table to achieve vertical centering, that is, p to simulate table, if CSS has a property to achieve this effect that is good.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!