位置：首页>> 网络编程>> 网页设计>> 使用CSS简单实现垂直居中（3）

使用CSS简单实现垂直居中（3）

作者：dudo　来源：dudo blog　发布时间：2008-06-23 07:32:00　

标签：居中,css,浮动

为什么这样可行呢？

实际上这里涉及到浮动的一个有趣的行为，而且也比较好理解它的原理。为什么当我们使用一个静态元素（或者是第一个示例中绝对定位元素）时内容会从窗口的顶端消失，而当我们使用float时却不会产生这个问题呢？

浮动的一个特点就是他们脱离了文本流（尽管你可以通过为后面的元素使用clear来重新控制它们）。浮动元素后面的内容会被移动以为浮动元素留空间（通常是通过浏览器对静态顶部填充来清除浮动）。如果浮动元素根本没有出现该位置，那么后面的内容会占居浮动元素原来在页面中的位置。因此对一个浮动元素使用负的顶部填充（margin），浮动元素会冲破任何包含它的块级元素限制，因为我们前面已经提到浮动元素一开始就脱离了文本流。但是如果我们把元素从包含它的块级元素向外拖动足够远以至于它完全超出父元素范围，那么它后面的任何元素将不会继续跟随其向上移动，但是重新设定包含块级元素的内部内容的大小，会使浮动元素继续浮动。

这就是我们的例子中发生的事情，浮动元素被从body中向上移动，它后面的元素被迫留在body形成的块级元素中。这可能有点难以直接去理解，但是我们可以看一下下面的这个演示。

.float{
   width:200px;
  height:100px;
background:red;
   float:left;
}
.top{
background:green;
height:300px;
width:100％;
}
.follow-on{
   clear:both;
   background:blue;
  height:100px
}

<div class="top">Top</div>
<div class="float">Float</div>
<div class="follow-on">Following content</div>

上面的代码在页面的顶端设置了一个静态元素，其后是一个浮动元素，再后是其它的静态内容，它就产生了如图5所示的效果，或者可看在线演示：Horizontal-and-vertical-centerl.htm （.64 KB）

图5

没有什么特别需要注意的，一切如同我们相像的一样。

如果下面我们给浮动元素增加一个负的100px的顶端边距，我们就得到如图6所示的结果：

.float{
   width:200px;
  height:100px;
background:red;
   float:left;
   margin-top:-100px
}

图6

仍然和我们料想的一样，但是如果我们增加负的200px的顶端填充又会发生什么呢？

.float{
   width:200px;
  height:100px;
background:red;
   float:left;
   margin-top:-200px
}

图7显示了结果：

图7

和你看到的一样，浮动元素从后面的内容中移走，但是浮动元素后面的内容仍然会停留在包含它的元素的顶端（如在绿色元素的下面）。在我们的前面的例子中，当我们向外移动浮动元素时，也是发生了同样的事情。

但是如果我们从红色的div去掉float属性，那么红色的div和它后面下面的内容就会被移动到绿色元素的上面。

图8

浮动元素负的边距产生变化，后面的内容也会相应地向上移动。

我希望这个小的提示会让你感兴趣（即使你已经知道了），这也说明对于我们每一个人都有新的东西要去学习。前面的例子中所有的代码都已经放在了<head>中，方便大家查看。

如果你想了解一些更多高级的居中设计技术，我这里还有其它几个方法供参考。好运！

dudo注：在我前面的文章中，我已经总结果实现水平居中和垂直居中的方法，你可以对比参照一下。

再p.s. 前几点做了几道，类似的题，好像也是犯了两样的毛病，汗~！

原谅链接：http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/

中文翻译：http://www.dudo.org/article.asp?id=251

第一页上一页 1 2

投稿

使用CSS简单实现垂直居中（3）

为什么这样可行呢？

猜你喜欢