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

只看该作者 · 发表于 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的标准化设计到底有什么好处？

只看该作者 · 发表于 2015-1-18 05:45:17

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-1-25 18:01:06

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-2-3 12:56:52

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-2-9 03:34:21

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-2-26 20:50:39

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-3-8 17:58:47

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-16 10:53:56

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-3-22 22:59:46

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

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

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

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

相关帖子