javascript - 仅当屏幕处于最大宽度时才使元素居中（添加 min-width 属性）

Question

仅当屏幕处于最大宽度时才将元素居中

目前，我通过计算屏幕的宽度并将元素的“margin-left”设置为 screen.width/2 - element.width/2 来居中各种元素（通过 JavaScript）。

我这样做是为了当用户调整窗口大小时，如果窗口大小调整到小于 50%，元素将保持在屏幕的绝对中心，并且变得不可见。

这是仅以最大宽度居中的典型方法，还是有更简单的 CSS 方法来实现相同的效果？

我试图达到的效果的一个例子：Khanacademy.com 的标志。

[编辑] 感谢饥饿之星，我能够找出问题的根本原因。如果您没有设置最小宽度，则 margin: 0 auto 将始终使您的元素居中。

Answer 1

对于块元素，给出明确的宽度加号margin: 0 auto是基本技术。内联（和内联块）元素，例如您可以text-align:center在父容器上居中使用的图像。

Answer 2

您可以使用 css 实现此目的。

margin: 0 auto;

例子

Answer 3

如果您有一组元素需要居中但需要保持左对齐或其他格式，即标题后跟带有列表的段落，您可以执行以下操作：

HTML

<div id="wrapper">
     <div class="outer">
         <div class="inner">... Content...</div>
     </div>
</div>

CSS

#wrapper {
     margin: 0 auto;
     width: 900px;
}
.outer {
     height: 50px;
     left: 50%;
     position: relative;
     display: inline-block; /* or float: left; */
}
.inner {
     right: 50%;
     position: relative;
}