[导入]css图片垂直居中的方法

一下是几种用div+css实现图片垂直居中的方法。

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< style type = " text/css " >
<!--
* ... {margin:0;padding:0}
div ... {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p ... {
position:static;
+position:absolute;
top:50%
}
img ... {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
-->
</ style >
< div >< p >< img src = " http://www.google.com/intl/en/images/logo.gif " /></ p ></ div >

标准浏览器下另类方法:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< style type = " text/css " >
<!--
body ... {
margin:0;padding:0
}
div ... {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p ... {
position:static;
+position:absolute;
top:50%
}
img ... {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after ... {
content:".";font-size:1px;
visibility:hidden
}
-->
</ style >
< div >< p >< img src = " http://www.google.com/intl/en/images/logo.gif " /></ p ></ div >

标准浏览器严格型申明下：

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< 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:276px;
height:110px;
vertical-align:middle
}
-->
</ style >
< div >< p >< img src = " http://www.google.com/intl/en/images/logo.gif " /></ p ></ div >

利用字体大小的方法：

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< style type = " text/css " >
* ... {margin:0;padding:0;}
div ... {
width:500px;text-align:center;border:1px solid #f00;line-height:500px;
height:500px;font-size:500px
}
*> div ... {
font-size:12px
}
div img ... {
vertical-align:middle
}
</ style >
< div >
< img src = " http://www.google.com/intl/en/images/logo.gif " />
</ div >

display:inline-block 方法：

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN " " http://www.w3.org/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 = " http://www.baidu.com/img/logo.gif " alt = "" />
</ div >

最简单当然是背景图片的方法拉

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< style type = " text/css " >
* ... {margin:0;padding:0;}
div ... {
width:500px;border:1px solid #f00;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
</ style >
< div >
</ div >

文章来源: http://www.link-to.cn/post/2007/10/css图片垂直居中的方法.aspx

转载于:https://www.cnblogs.com/sliuqin/archive/2007/10/22/933610.html