当元素达到最大宽度时，元素不居中

Question

我的HTML中有一个具有这种风格的元素：

{
   max-width: 1500;
   padding-rigth: 40px;
   padding-left: 40px;
   width: auto;
}

当屏幕小于1580px时，一切正常并且元素在屏幕中居中，但是当屏幕大于该值时，元素不居中并且粘在屏幕右侧（使用40px填充）。 / p>

当屏幕大于1580像素时，我该怎么做才能使元素居中？

Answer 1

添加保证金：0自动;

  {
   max-width: 1500;
   padding-rigth: 40px;
   padding-left: 40px;
   width: auto;
   margin: 0 auto;
  }

Answer 2

  

当屏幕小于1580像素时，一切正常，元素在屏幕中居中

我假设元素是块级元素，对吧？如果是这样，您只需要margin-left / margin-right auto来实现对齐。

{
   max-width: 1500;
   padding-rigth: 40px;
   padding-left: 40px;
   width: auto;
   margin-left: auto;
   margin-right: auto;
}

Answer 3

您可以使用margin: 0 auto;。在此示例中，#center div将扩展到1500px，然后在其父div内保持居中：

<强> HTML

<div>
    <div id="center"></div>
</div>

<强> CSS

#center {
   max-width: 1500px;
   margin: 0 auto
   width: auto;
}

注意，如果您想指定您的值，您应该真正指定一个度量单位，以便浏览器知道如何处理它，即1500px而不仅仅是1500。此外，padding-rigth看起来像一个拼写错误，并且不会做任何事情，因为它不是有效的CSS属性：）