Question

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

目前，我通过计算屏幕宽度并设置元素＆＃34; margin-left＆＃34;来集中各种元素（通过JavaScript）。到screen.width / 2 - element.width / 2。

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

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

我想要达到的效果的一个例子：Khanacademy.com的徽标。

[编辑] 感谢hungerstar，我能够找出问题的根本原因。如果没有设置最小宽度，则margin：0 auto将始终保持元素居中。

Answer 1

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

Answer 2

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

margin: 0 auto;

EXAMPLE

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;
}

仅当屏幕处于最大宽度时才对中元素（添加最小宽度属性）

3 个答案: