您的位置:CSS5 > HTML入门 >

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

发布日期:2018-02-05 14:09:08 来源:css5.com.cn

遇到过有的浏览器中网页主体内容是居中的(网页居中),可有的浏览器中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.CSS5.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

标签(Tag): 居中 布局居中
本文分享URL地址:https://www.css5.com.cn/html/1491.shtml

作者:css5原创

上一页:上一篇:每天几个标签 轻松学HTML 表格table 列表ul ol li dl dt dd
下一页:下一篇:html空格 各种html 空格教程汇总