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

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被推入页面的中心.