十一选五怎么算中奖: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>

其它内蒙古11选五开奖5号的不再列出,简化你原有的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)。

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

日期:2017-10-30 11:16:02 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:thinkcss原创

热门点击

  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 70期:开创了中国人太空“开飞船”历史的刘旺 2019-07-15
  • 纪念人民日报创刊70周年改革开放40周年美术活动 2019-07-07
  • 菜鸟世界杯送出50吨包裹 荷兰成国旗最大购买地菜鸟世界杯送出50吨包裹荷兰成国旗最大购买地-手机行情 2019-07-02
  • [鄙视]就你这智商还挑战爱因斯坦?蚍蜉撼树也! 2019-07-02
  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-06-27
  • 江夏区宣传干部培训班圆满落幕 荆楚网携手江夏区委宣传部举办 2019-06-26
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 广东好彩1在哪里买 福彩6码组六遗漏 辽宁35选7开好运奖结果查询 福彩幸运农场复式 福彩30选5最新开奖结果 四川金7乐遗漏号房产 2013年排列五走势图 下象棋游戏 31选7论坛 三肖中特精准24码免费公开 北京11选5开奖查询前三 福利彩票现场直播开奖 富途牛牛软件使用说明 法甲第一轮集锦 竞彩足球比分推荐计算器