Question

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

Answer 1

您可以使用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被推入页面的中心。

Answer 2

使用纯css：

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

或

div { margin: 0 auto; }

这可以接受吗？

Answer 3

请注意这一点，这应该可以解决您的问题

<强> 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/

如何在不影响内部内容的情况下居中<div>？</div>

3 个答案: