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

看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接:IE6下用writing-mode实现 未知高度替换元素垂直居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>利用定位来显示垂直局中的图片</title> <style type="text/css"> .miao { width:500px; height:220px; line-height:220px; border: 1px solid; text-align: center; } .miao img { vertical-align: middle; } </style> <!--[if IE 6]> <style type="text/css"> .miao span { border: 1px solid red; height: 100%; /* 要保证和父元素高度一样才行 */ writing-mode: tb-rl; vertical-align: middle; } </style> <![endif]--> </head> <body> <h1>固定高宽的容器中,图片垂直局中。</h1> <p>使用的绝对定位和相对定位的方法</p> <div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr /> <div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr /> <div class="miao"> <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了 </div> </body> </html>
 提示:您可以先修改部分代码再运行
/*lesliezmz 粘贴结束 */

/*yoom 粘贴开始 2010-01-18*/

因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>利用定位来显示垂直局中的图片</title> <style type="text/css"> .miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;} .miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;} .miao span img{border:dashed 1px green;} </style> <!--[if lte IE 7]> <style type="text/css"> .miao{position:relative;overflow:hidden;} .miao span{position:absolute;left:50%;top:50%;} .miao span img{position:relative;left:-50%;top:-50%;} </style> <![endif]--> </head> <body> <h1>固定高宽的容器中,图片垂直局中。</h1> <p>绿色容器是span,目的是使自己的左上角与容器中心点对齐。红色是具体图片,再次设置负值使自己的中心点和父容器的中心点重合,最终 达到垂直局中的目的。</p> <div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span> </div> <hr /> <div class="miao" style="width:300px;height:80px;"> <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span> </div> <hr /> <div class="miao" style="width:500px;height:220px;"> <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span> </div> </body> </html>
 提示:您可以先修改部分代码再运行

如果不喜欢条件注释,可自行将代码以css hack的方式拼凑起来。

原帖链接:

未知高宽的图片垂直局中
/*yoom 粘贴结束*/
<!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>
 提示:您可以先修改部分代码再运行

 

时间: 2024-11-03 17:10:04

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"><!--body {margin:0;padding:0}div {width:500px;

css 图片垂直居中(兼容各主流浏览器,含IE6/IE7)

1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome 优点:不添加任何多余标签,兼容主流浏览器  代码如下 复制代码 <!--html结构--> <div class="box-1">  <a class="img-wrap-1" href="#">   <img src="images/1.png" alt="" />

CSS实现垂直居中方法

这种方法,在 content 元素外插入一个 div.设置此 div height:50%; margin-bottom:-contentheight;. content 清除浮动,并显示在中间. <div id="floater"> <div id="content">   Content here</div> </div> #floater {float:left; height:50%; margin-botto

Css Reset(复位)方法整理第1/3页_经验交流

相信看完全文您会对Css Reset有个重新的认识PS: 复制代码 代码如下: * { padding: 0; margin: 0; } 这就是最常用的Css Reset,但是这里会有很多问题. 原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定"Css Reset"也是为了兼容与统一,正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱. 非常感谢Perishable的整理与归纳 下面是关于几类Css Reset的简单介绍,本人能力

三款css div 图片垂直居中代码

本文章收集了三款css教程 div 图片垂直居中代码哦,他可以对div进行垂直居中同时也可以对图片垂直居中哦,好了下面我们来看看这款垂直居中实例代码吧. cssbox{  /* 非ie内核浏览器识别垂直居中 */  display:table-cell;  vertical-align:middle;  /* ie内核浏览器识别垂直居中 */  *display:block;  /* 约为高度的0.873,200*0.873 约为175 */  *font-size:175px;  text-a

css垂直居中怎么设置?文字上下居中和图片垂直居中

css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下居中:一.单行内容的居中.只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了.css代码为{height: 4em;line-height: 4em;overflow: hidde

CSS解决图片垂直居中的方法

图片垂直居中是DIV+CSS布局中经常碰到的问题,下面就这个问题我们进行研究并给出一个解决方法! 目的是为了使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 难点在于两点: 1.垂直居中: 2.图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box {         /*非IE的主流浏览器识别的垂直居中的方法*/         display: table-cell;        

CSS中如何实现图片垂直居中

核心提示:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中 在曾经的 淘宝UED 招聘 中有这样一道题目: "使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中." 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性. 题目的难点在于两点:       1.垂直居中:       2.图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的

用css实现图片垂直居中的使用技巧_经验交流

题目的难点在于两点:  垂直居中:   图片是个置换元素,有些特殊的特性.   至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:  .box {    /*非IE的主流浏览器识别的垂直居中的方法*/    display: table-cell;    vertical-align:middle;    /*设置水平居中*/    text-align:center;    /* 针对IE的Hack */    *display: block;    *font-size: 1