×
DIV水平居中的方法小结
优畅主题 前端开发 2014-09-11 11:20 4,091 0 条评论

我想这个是我们经常遇到的一个问题,当然对很多人来说,这是个很简单,很容易解决的问,在这里优畅只是把这些常用的方总结下。

一、margin:0 auto 与 text-aligh:center

这个方法我想是大部分人在用的,也是最简单的。我们先设定marign: 0 auto,即上下边距为0,左右为自动,这样在IE7、Firefox、Opera等浏览器中就能实现居中了。

div#wrap {
 width:760px;
 margin:0 auto;
 border:1px solid #666;
 background-color:#eee;
}

但这在IE6中是不起作用的,在IE6中我们得用text-align:center.在IE中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center,这样页面内所有的元素都会自动居中.现在我们修改下代码如下:

 body { text-align:center; }
 div#wrap {
      text-align:left;
      width:760px;
      margin:0 auto;
      border:1px solid #666;
      background-color:#eee;
 }

二:对wrap进行相对定位,然后使用负边距抵消偏移量。

这种方法我想用的人比较少,但这也是一个简单又有效的方法。
我们设置wrap的定位是相对于其父元素body标签的,然后将其左边框移动到页面的正中间(也就是left:50%含意);最后我们再从中间位置向左偏移回一半的距离来,这样就实现了水平居中了。

div#wrap {
     position:relative;
     width:760px;
     left:50%;
     margin-left:-380px;
     border:1px solid #666;
     background-color:#eee;
 }

三、其它的居中方式

body {
      padding:10px 150px;
 }
 div#wrap {
     border:1px solid #666;
     background-color:#eee;
 }

如果本文对你有帮助,你可以扫描右边的二维码打赏,谢谢支持
联系优畅:uctheme#qq.com (#改为@)
微信订阅号:优畅主题(uctheme)
官网淘宝店:http://uctheme.taobao.com
版权声明:版权归 优畅主题 所有,转载请注明出处!
转载请保留链接: https://www.uctheme.com/929.html
谢谢微信打赏

微信钱包扫描赞助

谢谢支付宝打赏

支付宝扫一扫赞助

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!

上一篇 CSS样式中class和id的区别和含义 WordPress 真正的图片延迟加载技术 下一篇

5 + 6 = ?

目前还没有评。

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册