自动边距不在页面中居中

Posted 2023-03-05

【中文标题】自动边距不在页面中居中

【英文标题】：Auto margins don't center image in page

【发布时间】：2011-08-09 16:53:43

【问题描述】：

在this example 中，图像未居中。为什么？我的浏览器是 Windows 7 上的 Google Chrome v10，而不是 IE。

<img src="/img/logo.png" style="margin:0px auto;"/>

【问题讨论】：

测试一个样式类，我发现这不起作用 margin:0 auto; 在一些测试后发现如果你添加到元素的类名有与元素同名这将不起作用。

【参考方案1】：

添加display:block; 即可。图片默认是内联的

为了澄清，block 元素的默认宽度是auto，它当然会填充包含元素的整个可用宽度。

通过将边距设置为auto，浏览器将剩余空间的一半分配给margin-left，另一半分配给margin-right。

【讨论】：

+1 因为是正确的。如果您详细说明 margin:auto 在流程中居中某个项目所需的内容，那将是一个很好的答案。 （display:block或display:table、position:static或position:relative等）

@Phrogz 同意；添加了一些解释。

阅读本文的人可能还会发现添加“float”none 很有用，因为任何其他类型的浮动都会自动破坏您的保证金。

但它仍然没有居中。它只是水平居中。我想将它垂直居中，但即使我将 0px auto 更改为 auto 它仍然不起作用。

当然不是，自动边距是一种较老的“黑客”来居中内容。如果您需要精确对齐，请使用 flexbox：display: flex; align-items: center; justify-content: center，现在您的内容水平和垂直居中。或者将其移至内容本身的align-self: center; justify-self: center。 css-tricks.com/snippets/css/a-guide-to-flexbox

【参考方案2】：

您可以使用 display:table; 居中自动宽度 div

div
margin: 0px auto;
float: none;
display: table;

【讨论】：

这行得通，我不知道为什么。你能解释一下吗？

我以前从未使用过它，但它现在对我有用。

【参考方案3】：

在某些情况下（例如早期版本的 IE、Gecko、Webkit）和继承，带有position:relative; 的元素会阻止margin:0 auto; 工作，即使top、right、bottom 和@ 987654326@ 未设置。

将元素设置为position:static;（默认值）可能会在这些情况下修复它。通常，具有指定宽度的块级元素将使用relative 或static 定位来尊重margin:0 auto;。

【讨论】：

margin: 0 auto 在相对定位的元素上工作得很好，只要它们是没有浮动和指定宽度的块元素......

我认为这是讽刺。如果您编辑答案以使其不准确，我将删除反对票。我已经写了将近 15 年的 CSS，并且不记得自动边距不能水平居中相对定位的固定宽度元素 - 尽管 float 和 display 等其他属性可以改变这种行为。

【参考方案4】：

就我而言，问题在于我设置了 min 和 max width 而没有 width 本身。

【讨论】：

回顾一下：元素必须是position:static，有一个固定的width: 设置并且是一个display:block 元素

对我来说也是宽度问题 - bootstrap 会自动将我的 div 设置为使用 100% 可用

【参考方案5】：

每当我们不添加宽度并添加margin:auto 时，我想它不会起作用。这是根据我的经验。宽度给出了它需要提供相等边距的确切位置。

【参考方案6】：

对于使用 position:absolute; 的用户，可以使用 margin-left:auto; margin-right: auto; 或 margin:0 auto; 的替代方法： 您将元素的左侧位置设置为 50% (left:50%;) 但这不会正确居中以使元素正确居中您需要给它一个负一半宽度的边距，这将将元素完美居中

这里是一个例子：http://jsfiddle.net/35ERq/3/

【参考方案7】：

对于引导按钮：

display: table; 
margin: 0 auto;

【参考方案8】：

把它放在body的css中： 背景：#3D668F； 然后加： 显示：块； 边距：自动； 到img的css。

【参考方案9】：

我记得有一天我花了很多时间尝试使用 margin: 0 auto 使 div 居中。

我上面有 display: inline-block，当我删除它时，div 正确居中。

正如罗斯指出的那样，它不适用于内联元素。

【参考方案10】：

img显示：弹性；最大宽度：80%；边距：自动；

这对我有用。在这种情况下，您还可以使用 display: table。 此外，如果您不想坚持这种方法，可以使用以下方法：

img位置：相对；左：50%；