Article introduction of Wulin.com (www.vevb.com): How to center the pictures vertically.
The width and height of the picture are unknown, and there is no fixed size. Under this premise, it is quite troublesome to make the picture vertically centered in a container with fixed width and height. Since recent projects may use this solution, I have collected and sorted out some commonly used methods.
The following figure is an ideal rendering. The width and height of the external container are fixed, and the width and height of the picture in the middle are unknown, but the picture must always be vertically centered relative to the external container.
However, the effect implemented in reality is not perfect. Since the parsing of each browser is different, each browser will have a deviation of 1px-3px.
Method 1 (XHTML 1.0 transitional):
This method is to set the display mode of the external container to display:table, nest a span tag outside the img tag, and set the display mode of the span to display:table-cell, so that vertical-align can be easily aligned like table elements. Of course, this is only in standard browsers, IE6/IE7 also needs to use positioning.
HTML structure part:
<div id=box>
<span><img src=images/demo.jpg alt=></span>
</div>
CSS Style Part:
<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 (XHTML 1.0 transitional):
The principles and structures of the implementation of Method 2 and Method 1 are similar, and the structures are the same. Method 1 uses conditional annotations, and Method 2 uses CSS Hack.
CSS Style Part:
<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 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;
}
</style>
This method has a disadvantage. In a standard browser, since the display mode of the external container #box is display:table-cell, the margin attribute cannot be used for #box, and setting borders in IE8 is also invalid.
Method 3 (XHTML 1.0 strict):
Standard browsers still set the display mode of the external container #box to display:table-cell. IE6/IE7 uses the method of inserting a pair of empty tags in front of the img tag.
HTML structure part:
<div id=box><i></i><img src=images/demo.jpg alt=></div>
CSS Style Part:
<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 3 also applies to XHTML 1.0 transitional. The above methods are collected from the web teaching website. For the time being, only these three methods are quite satisfied with, and the compatibility is good, and the limitations are relatively small. I have also tested some methods one by one, but the results are not ideal, and there are quite different differences among different browsers. In addition, Situ Zhengmei has also collected some methods here.
Thinking: Many methods rely on setting the display mode of the external container to a table to achieve vertical centering, that is, the div to simulate the table. How good would it be if CSS has a property to achieve this effect. If you have a good method, you are welcome to share it.
original: