CSS高级技巧:网页布局

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

3. 垂直居中

CSS中比较大的问题出现了, CSS较难使用简单的方法来完成垂直居中.

在容器中要使文字垂直居中, 那可以将容器的line-height设置的和height一样来完成这个工作,

但是要使容器垂直居中的话, 那就比较复杂了.

HTML如下:

<body>
    <div class="wrapper">
        <div id="box">123</div>
    </div>
</body>

CSS如下:

body{margin:0;padding:0;height:100%;}
.wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px red;}
#box{width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;}

按理说这样就可以了呀, 但是IE下面一点效果都没有...那是因为IE的display属性只接收:block, inline, inline-block, none, inherit, 不接收table, table-cell, table-row, 那就头痛了呀.

唔, 其实思路有很多, 我提供其中一种:

CSS如下:

body{margin:0;padding:0;height:100%;}
.wrapper{width:600px;height:400px;border:solid 1px red;}
#box{width:200px;height:200px;position:relative;top:50%;left:50%;margin-top:-100px;margin-left:-100px;border:solid 1px green;}

局限性非常大, 必须要已知高度...

更可以对IE浏览器进行filter之后hack它. 使用ie独有的expression, 虽然在大型脚本上expression表现的相当差, 但是简单的计算offsetHeight还是不太会影响性能, 再怎么说M$也针对expression进行过优化.

所以垂直居中还是要看场合自行挑选合适的方案来解决.

浮动布局

现在大家都熟知浮动布局了, 不多说, 这个是CSS布局的基础...主要是float和margin的合理应用.

Faux Columns:

伟大的Dan的另一项发明, 呵呵, 其实很简单, 用垂直平铺背景图来做出视觉上多栏布局等高的效果. 但是很实用, 不是吗?

Equal height boxes with CSS:

在标准推行过程中比较有名的文章之一, 介绍像table一样进行CSS布局, 但是不适用于IE...唉

弹性布局

很不错的理念, 原理其实也不难, 就是用em来标注尺寸, 这样就可以让浏览器自行放大或缩小任何的容器或是元素了.

下一篇CSS教程 文章：CSS高级技巧:阴影效果

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2

分享到：更多

你可能对下面的文章感兴趣

上一篇: css教程：网页布局下一篇: IE对网页中引入CSS样式表的限制

关于CSS高级技巧:网页布局的所有评论

随机推荐