Div之家_Div+CSS学习_SEO_Design_web2_站长工具_
Div之家首页
Div+css
SEO
UI
Design
Web info
HandBook
Tool
Div+css首页
热门搜索关键字:
教程
div
导航
ie
网站
css
WEB标准技术学习-CSS图片垂直居中方法整理集合
作者:佚名 来源:网络
(转载请注明)
css
图片垂直居中方法整理集合
时间: 2007-5-18 17:10:44 浏览:1837
看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.divhome.com/#.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="/
css
site/uploadfile/200806/14/45235753881.gif" /></p></div>
标准浏览器下另类方法:
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.divhome.com/#.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="/csssite/uploadfile/200806/14/45235753881.gif"/></p></div>
标准浏览器严格型申明下:
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.divhome.com/#.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="/csssite/uploadfile/200806/14/45235753881.gif" /></p></div>
利用字体大小的方法
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.divhome.com/#.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="/csssite/uploadfile/200806/14/45235753881.gif" /></div>
最简单当然是背景图片的方法拉
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.divhome.com/#.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("/csssite/uploadfile/200806/14/45235753881.gif") center no-repeat }</style><div></div>
Div之家