This article collects three CSS tutorial div picture Vertical Center Code Oh, he can vertically center the Div and also center the picture vertically Oh, okay, let's take a look at this vertically centered instance code.
cssbox{
/* Non IE kernel browser recognition Vertical Center * *
Display:table-cell;
Vertical-align:middle;
/* IE kernel browser recognition Vertical Center * *
*display:block;
* * About the height of 0.873,200*0.873 about 175 * *
*font-size:175px;
Text-align:center;
width:200px;
height:200px;
}
. Cssbox img{
Vertical-align:middle;
}
Method Two
<!doctype HTML Public-//w3c//dtd XHTML 1.0 strict//en "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD"
<html xmlns= "http://www.w3.org/1999/xhtml"
<head>
<meta http-equiv= "Content-type" content= "HTML; Charset=utf-8 "/>
<title>www.jzread.com</title>
<style type=" Text/css "
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
}
Div p {
position:static
+position:absolute
top:50%
Vertical-align:middle
}
img {
position:static
+position:relative
top:-50%; left:-50%;
width:200px;
height:90px;
vertical-align:middle
}
;
</style>
</head>
<body>
<div ><p><IMG src= "/skins/logo3.gif"/></p></div>
</body>
</html>
Method Three
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
<html xmlns= "http://www.zhutiai.com/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "HTML; charset=gb2312 "/>
<title>div+css Picture Vertical Center </title>
<style type= "Text/css" >
*{margin:0 padding:0;
. imgbox{width:400px; height:400px margin:30px; border:1px solid #ddd; text-align:center; line-height:400px;
. Imgbox img{Vertical-align:middle;
*html. imgbox{font-size:360px; font-family:arial;}
</style>
</head>
<body>
<div class= "Imgbox" >
<img src= "/article/uploadfiles/200907/20090717185022273.gif"/>
</div>
</body>
</html>
1. The vertical center effect implemented by this method must be in strict mode (DTD XHTML 1.0 Strict) to take effect.
2. For standard browsers (FF,OPERA,CHROME,IE8 ...) Imgbox img{Vertical-align:middle; You can realize that the picture is centered vertically.
3. For IE7, we can use line-height:400px to achieve the goal.
4. The remaining IE6 are *html. imgbox{font-size:360px; font-family:arial; To achieve. One of the 360=400*90%, 400 is the height of the container, 90% is because it is easy to remember, its exact value is 0.873. As to how this numerical value has not been specifically studied ...
Method Three
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://mb.jzread.com/tr/xhtml1/dtd/xhtml1-strict.dtd" >
<style type= "Text/css" >
div {
Display:table-cell;
height:300px;
width:500px;
Text-align:center;
border:1px solid #000;
Vertical-align:middle
}
</style>
<!--[If ie]>
<style type= "Text/css" >
I{
Display:inline-block;
height:100%;
Vertical-align:middle
}
IMG {
Vertical-align:middle
}
</style>
<! [endif]-->
<div>
<i></i>
<img src= "/img/logo.gif" alt= "/>
</div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
