当前位置: 主页 > 网页制作 > CSS > CSS实现网页垂直居中的办法(2)

CSS实现网页垂直居中的办法(2)

时间:2010-1-11来源:互联网 点击:

改进的方法

针对这些问题的另一个类似的版本是让元素依然保持垂直方向上的定位方式,但是水平方向上设置 margin 为 auto 以达到我们的目的。这样子消除了文字在水平方向上的问题。请看改进的代码。

CSS 代码:

html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
#vertical{
position:absolute;
top:50%;
margin-top:-198px;/* half main elements height*/
left:0;
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}

HTML 代码:

<div id="vertical">
<div id="hoz">
<h1>Content goes here</h1>
</div>
</div>

你可以在 这里 看到实际的页面效果。

这样子达到了我们预期的一部分效果,但是在垂直方向上依然存在着问题,你可以在下图中看到:

站长资讯网
. TAG: CSS 网页 垂直居中 办法

查看[CSS实现网页垂直居中的办法(2)]所有评论
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:
推荐内容最近更新人气排行
关于我们 | 友情链接 | 网址推荐 | 常用资讯 | 网站地图 | RSS | 网站留言