0

我试图让这个<div>我必须在页面上居中但是当我使用时align=center，div内的一些内容也会受到影响。有没有办法防止这种情况？

4

3 回答 3

6

您可以使用 CSS（也必须指定 div 的宽度，请参阅 @j08691 评论）：

div { margin: 0 auto; }

div应更改为更具体的选择器，例如容器的 ID（#表示 ID）或类（.表示类）。

例子：

#myDivID {}
.myDivClass {}

这样做的原因是渲染引擎总是试图优化和平衡任何指定为auto. 在这里，margin: 0 auto简写为：

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

在这里，浏览器不会在 的顶部和底部应用任何边距div，但是当它看到左右边距都设置为 时auto，它会尝试（并成功）通过拆分剩余的边距使它们彼此相等空间。这导致div被推到页面的中心。

于 2013-09-18T15:47:04.890 回答
0

使用纯 CSS：

#content {
  width: 10% ;
  margin-left: auto ;
  margin-right: auto ;
  left: 45%;
  top : 50%;
}

或者

div { margin: 0 auto; }

这可以接受吗？

于 2013-09-18T15:48:28.593 回答
0

请看这个，这应该可以解决您的问题

HTML

<div id="outer">'
    dsadkjahdkjasgud
    dbsudbasjdhbasjkdh<br />
    dbsudbasjdhbasjkdh<br />
    <div id="innerCenter">
        dbsudbasjdhbasjkdh<br />
        dbsudbasjdhbasjkdh<br />
        dbsudbasjdhbasjkdh<br />dbsudbasjdhbasjkdh<br />
    </div>
</div>

CSS

#outer{
        width : 500px;
     background-color:green;

}

#innerCenter{ 
    margin:0 auto;
    width : 50%;
     background-color:red;
}

**注意：您可以根据您的布局修改宽度

小提琴：http: //jsfiddle.net/aasthatuteja/zKstw/

于 2013-09-18T15:54:25.737 回答