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

显示全部楼层 · 发表于 2015-1-16 00:14:25

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
表格单位格
行内块（inline-block）
第一个对照好了解，第二个良多人大概会疏忽。好比，良多人在图片与文本混排的时分想让图片相对文本垂直居中除用IE的公有特征valign="absmiddle"别无他法。记着，默许下图片就是属于inline-block，你只需复杂的img{vertical-align:middle;}便可。
那末，我们进进主题。如今我们因为某些特别必要两个并排的div想完成垂直居中。如前所述，div非表格，可是今世的扫瞄器中除IE都撑持display:table-cell。刚好，IE撑持dispaly:inline-block，那末我们就用两种体例为今世扫瞄器完成非表格的垂直居中，异曲同工。
HTML以下：
<divid="div1">blahblah...瞥见我居中了吗？</div>
<divid="div2">
<p>blahblah...</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。
例子：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh"xml:lang="zh">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<metaname="developer"content="Realazy"/>
<title>未知高度，div垂直居中的一个跨扫瞄器计划</title>
<styletype="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>前往<ahref="http://www.blueidea.com/tech/web/2007/4629.asp">未知高度的非表格垂直对齐</a></p>
<divid="bd">
<divid="div1">blahblah...瞥见我居中了吗？</div>
<divid="div2">
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
<p>blahblah...</p>
</div>
</div>
</body>
</html>
</p>
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

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

[DIV+CSS] 来看看：未知高度的非表格垂直对齐

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块