您的位置:首页 > HTML入门 > 【 返回上一页

让div网页居中 html网页居中方法

遇到过有的浏览器中网页主体内容是居中的(网页居中),可有的浏览器中HTML网页整体是靠右(居右)的。问题原因在于没有设置css布局居中属性margin。

html最外层DIV设置宽度同时需要设置居中CSS属性。
margin:0 auto

HTML布局居中源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html网页居中 www.ThinkCSS.com</title>
<style>
#warp{margin:0 auto;width:980px}
#header{ background:#CCC; height:120px}
#cent{ background:#F5F5F5; height:500px}
#footer{ background:#333; height:180px; color:#FFF}
</style>
</head>
<body>
<div id="warp">
<div id="header">网页头部</div>
<div id="cent">网页中间内容</div>
<div id="footer">网页底部</div>
</div>
</body>
</html>

浏览器中运行代码,可以看见网页居中的,同时主体网页内容宽度为980px。虽然头部、内容、底部区域没有设置宽度,没有设置居中,但因为外层还有一个<div id=warp></div>设置宽度和居中,所以网页HTML整体实现居中。

不知道是否为最外层DIV怎么解决居中?
1、主体内容固定宽度相同的,可以在<body>后,</body>前加一个div,对其设置宽度和margin:0 auto。
2、如果上下结构网页宽度不同,这个时候需要分别不同上下结构设置margin:0 auto样式,或者分别在外加一个div设置需要固定宽度或百分比宽度,和margin:0 auto

相关标签: 居中 布局居中
如需转载,请注明文章出处和来源网址:www.thinkcss.com/html/1491.shtml

日期:2018-02-05 14:09:08 来源:www.thinkcss.com 作者:thinkcss原创

热门点击