您的位置:首页 > CSS技巧 > 【 返回上一页

css+div实现整个html居中最简单方法

无论你是采用div css重构布局HTML,还是table表格布局的HTML,无论最外层是否使用div,是否使用float导致整个html网页居左的?

居中示意图
原来HTML不兼容不居中改为居中示意图

这里thinkcss教大家一个小技巧,轻松解决整篇网页水平居中。

一、对于html网页宽度固定系统的居中方法

对网页主体(网页最外层 即<body>后加<div>,</body>前加一个结束</div>)加一个div盒子,对这个盒子设置布局居中(margin:0 auto)和css 宽度即可。

CSS代码如下:

#t-warp{margin:0 auto;width:1000px}

这里设置宽度一定要恰当,一般主体内容多宽就设置多宽的值。

html对应body内添加代码:

<body>
<!-- 新增 -->
<div id=”t-warp”>
这里你原来的html代码内容
</div>
<!-- 新增结束 -->
</body>

解释说明
如果整个页面宽度1000px,原来未设置html居中,导致居左靠左,这里即设置一个id=t-warp选择器设置居中和宽度。但不能使用float浮动,使用后又会让div居左或居右,不能实现居中。

二、对于主体不同宽度的居中方法

常常遇到头部和底部100%宽度,而网页中间内容是固定宽度的,这个时候就需要添加三个div来实现分别居中。

对头部和底部加一个div最外层,设置居中和宽度100%

对中间区域加一个div,设置css布局居中和固定宽度值。

CSS代码:

<style>
.t-100{ margin:0 auto; width:100%}
.t-center{ margin:0 auto; width:1000px}
/* 假如网页中间内容宽度1000px */
</style>

其它CSS不再列出,简化你原有的CSS代码。

body内HTML代码:

<body>
<div class="t-100">
<div id="header">头部 100%宽度的</div>
</div>

<div class="t-center">
<div id="main1">内容部分 假如1000px宽度</div>
</div>

<div class="t-center">
<div id="main2">内容部分 假如1000px宽度</div>
</div>

<div class="t-100">
<div id="footer">底部 100%宽度的</div>
</div>
</body>

这里头部和底部设置100%宽度,并居中,中间假如有2部分的1000px宽度的内容,分别前后加了宽度1000px,居中的DIV布局。

当然这里头部和底部可以不用外加div,直接对原来#header和#footer选择器设置margin:0 auto,但需要注意不能使用float,这样保障居中(哪怕100%宽度也需要设置居中margin:0 auto)。

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

日期:2017-10-30 11:16 www.thinkcss.com thinkcss原创

热门点击