手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS图片垂直居中方法整理集合 !(常见问题解答)
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"> <> </style> <div><p><img src="http://www.jb51.net/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"> <> </style> <div><p><img src="http://www.jb51.net/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"> <> </style> <div><p><img src="http://www.jb51.net/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;border:1px solid #f00; height:500px; background:url("http://www.jb51.net/images/logo.gif") center no-repeat } </style> <div> </div>

提示:您可以先修改部分代码再运行

【CSS图片垂直居中方法整理集合 !(常见问题解答)】相关文章:

CSS图片垂直居中方法整理集合

在ie7下css居中样式text-align:center;偏左问题解决方法

用CSS实现垂直居中的3种方法

css实现body背景图片水平垂直居中方法

css中水平垂直居中对齐布局实例总结

css让容器水平垂直居中的7种方式

CSS基础教程:CSS属性结合起来使用

CSS实现图片圆角化处理

DIV+CSS 全屏垂直居中的一个办法

图片垂直居中css写法兼容ie6

精品推荐
分类导航