2018-02-05 14:11:54 div网页居中方法教程,网页有百分比宽度、有固定宽度的布局设置布局居中技巧方法。
遇到过有的浏览器中网页主体内容是居中的(网页居中),可有的浏览器中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.HTML8.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