[教程] [推荐] CSS图片垂直居中方法整理集合！(常见问题解答) [复制链接]

snwebsite　楼主

蓝色怪兽

荣誉管理

帖子: 4347
体力: 14380
威望: 69
居住地: 香港特别行政区湾仔区

发表于 2006-8-14 16:28:57 |显示全部楼层

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*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>

</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>

</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 粘贴结束*/

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

标准浏览器下另类方法:

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

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

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

利用字体大小的方法：

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

display:inline-block 方法

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

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

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

[ 本帖最后由 yoom 于 2010-1-19 10:39 编辑 ]

已有 1 人评分	威望	收起理由
greengnn	+ 3	我很赞同

总评分: 威望 + 3 查看全部评分

		自动登录	找回密码
密码			注册

[教程] [推荐] CSS图片垂直居中方法整理集合 ！(常见问题解答) [复制链接]

XHTML 1.0 Transitional在FF中有疑义

浏览过的帖子

浏览过的版块

[教程] [推荐] CSS图片垂直居中方法整理集合！(常见问题解答) [复制链接]