I want the picture vertically centered in the development of the site will encounter a lot, I summed up, once used several methods to make the picture vertically centered, in addition to the first method is limited to standard browser, the other two methods of compatibility is good, interested friends can understand the next
During the development of the website, there may be a situation where you want the picture to be centered vertically, and the height of the picture that needs to be centered vertically is also uncertain, which poses some challenges to the layout of the page. I have summed up some of the methods that have been used to align the picture vertically, except that the first method is limited to standard browsers, and the other two methods are not bad.
method One:
Set the display mode of the external container to display:table, the meaning of this setting does not need to say more. The IMG tag is nested with a span label outside, and the display mode of span is set to Display:table-cell so that the contents within the span are equivalent to tables. It is convenient to use the Vertical-align property to align the contents.
The code is as follows:
Copy Code code as follows:
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
<title> Method 1-picture with unknown height vertically centered </title>
<style type= "Text/css" >
Body {
height:100%;
}
#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]-->
</head>
<body>
<div id= "box" >
<span><img src= "Images/demo_zl.png" alt= "/></span>
</div>
</body>
</html>
Method Two:
The same is the case with standard browsers, and the difference is that IE6/IE7 uses a pair of empty tags in front of the IMG tag.
The code is as follows:
Copy Code code as follows:
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
<title> Method 2-picture with unknown height vertically centered </title>
<style type= "Text/css" >
body{
height:100%;
}
#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]-->
</head>
<body>
<div id= "box" >
<i></i><img src= "logo.png" alt= ""/>
</div>
</body>
</html>
Method Three:
Wrapping a P tag outside the IMG tag, the standard browser uses the P tag's pseudo class attribute: Before to center, and for IE6/IE7 to use CSS expressions to achieve compatibility.
The code is as follows:
Copy Code code as follows:
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
<title> Method 3-picture with unknown height vertically centered </title>
<style type= "Text/css" >
Body {
height:100%;
}
#box {
width:500px;height:400px;
Text-align:center;
border:1px solid #d3d3d3; background: #fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* Line higher than the height * *
}
/* Compatible Standard browser */
#box p:before{
content: "."; /* The specific value is independent of the vertical center, as much as possible to save characters/
margin-left:-5px; font-size:10px; /* Fix the Small bug Center/
Visibility:hidden; /* Set as 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;
}
</style>
</head>
<body>
<div id= "box" >
<p><img src= "images/demo_zl.png" alt= ""/></p>
</div>
</body>
</html>
I tested the top two no problem, the third seems to have a problem
