未知高度的非表格垂直对齐[z]

liudaoru

浏览: 1575753 次
性别:
来自: 北京

最近访客更多访客>>

fantaxy025025

金武飞扬

2720851545

talkweb_xiang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

IE CSS 浏览器 HTML Blog

非已知高度的垂直对齐的条件：

表格单元格
行内块（inline-block）

第一个比较好理解，第二个很多人可能会忽略。比如，很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign="absmiddle"别无他法。记住，默认下图片就是属于inline-block，你只需简单的img {vertical-align:middle;}即可。

那么，我们进入主题。现在我们由于某些特殊需要两个并排的div想实现垂直居中。如前所述，div非表格，但是当代的浏览器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那么我们就用两种方式为当代浏览器实现非表格的垂直居中，殊途同归。

HTML如下：

<div id="div1">blah blah...看见我居中了吗？</div>
<div id="div2">
	<p>blah blah...</p>
	....
</div>

CSS如下：

#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

我们来重点分析CSS。如您所知，*property是一个只有IE（包括IE7）才能解析的hack. 那么为何是inline而不是inline-block呢？这跟IE的变态工作方式有关，具体不深究。在此你只需知道加上zoom:1后，就等价于inline-block。另外，如果是a, span等非block的元素，则按正常方式display:inline-block。

分享到：

网站部门组织[z] | Proxy.newProxyInstance动态代理[z]

2008-05-08 14:54
浏览 1430
评论(1)
查看更多

1 楼 liudaoru 2008-05-08

文字和输入框垂直对齐：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<style type="text/css">
			.valign_middle {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}
		</style>
	</head>
	<body>
<div class="valign_middle">评论内容：</div>
<div class="valign_middle"><input style="height:60px;" name="title" type="text" />
	</body>
</html>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论