首页 > Web开发 > 详细

CSS中怎么让DIV水平居中

时间:2014-11-18 23:09:51      阅读:208      评论:0      收藏:0      [点我收藏+]
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
text-align:center;这个属性不是让div居中的,是让div中的内容居中,
当我们想让一个容器中的div水平居中其实方法很简单只需定义margin就行了,即margin:0 auto;然后你的div就水平居中了。
如下代码例子:
  box2在box1中水平居中:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>div居中问题</title>
  <style type="text/css">
   .box1{
    width:1000px;
    height: 700px;
    background-color:blue;
   }
   .box2{
    width:666px;
    height: 500px;
    background-color: #ccc;
    margin: 0 auto;
   }
  </style>
 </head>
 <body>
  <div class="box1">
   <div class="box2"></div>
  </div>
 </body>
</html>

CSS中怎么让DIV水平居中

原文:http://www.cnblogs.com/ElseYZ/p/4106182.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!