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

最新推荐文章于 2025-11-05 20:48:02 发布

原创最新推荐文章于 2025-11-05 20:48:02 发布 · 60 阅读

CC 4.0 BY-SA版权

文章标签：

非已知高度的垂直对齐的条件：
1.表格单元格 2.行内块（inline-block）
第一个比较好理解，第二个很多人可能会忽略。比如，很多人在图片与文本混排的时候想让[color=red]图片相对于文本垂直居中[/color]除了用IE的私有特性 valign="absmiddle"别无他法。记住，[color=red]默认下图片就是属于inline-block，你只需简单的img {vertical-align:middle;}即可。[/color]

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

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;}

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

例子：
<!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" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>未知高度，div垂直居中的一个跨浏览器方案</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}
#div1 {color:red;}
/* ]]> */
</style>

</head>
<body>
<h1>未知高度，<code>div</code>垂直居中的一个跨浏览器方案</h1>
<p>返回<a href="http://www.blueidea.com/tech/web/2007/4629.asp">未知高度的非表格垂直对齐</a></p>
<div id="bd">
<div id="div1">blah blah...看见我居中了吗？</div>
<div id="div2">
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
</div>
</div>
</body>
</html>