为啥 margin:auto 不工作？

Posted 2023-03-06

【中文标题】为啥 margin:auto 不工作？

【英文标题】：why isn't margin:auto working?为什么 margin:auto 不工作？

【发布时间】：2014-05-16 00:24:06

【问题描述】：

只是试图使我使用 html 放置的图像居中。只是尝试使用 Margin:auto 但它不起作用？

代码如下：

#indexheader 
    margin: 0 auto;
    margin-top:5%;
    width:190%;
    height: 190%;

【问题讨论】：

能否也请您分享一下 HTML？

Why can't I center with margin: 0 auto?的可能重复

【参考方案1】：

假设您想水平居中，您只需要在父元素上设置宽度并在图像本身上设置display:block。这是一个简单的例子：

JSFiddle

我不确定当宽度大于父级的 100% 时居中意味着什么。需要考虑的事情。

【参考方案2】：

如果您明确将宽度设置为 190%，则不一定需要 margin: auto。您可以将左边距设置为 -45%。

【讨论】：

这只是对一个非常具体和不常见的用例的修复。

【参考方案3】：

你的#indexheader 是否在另一个 div 元素中？如果是这样，那将导致它仅在元素内居中。

您是否对元素进行了任何 css 编码以使其不居中？比如一个位置：固定；？

此外，如果您将图像放置在“indexheader”中，它可能不会居中，因为您将框居中而不是图像居中。尝试将 id 应用于 html 编码中的图像元素并将其居中。

这是一个相当模糊的问题，因为您发布的内容应该居中，但没有看到您的任何其他代码，还有许多其他元素可能会影响它。

您总是可以在您的 html 中尝试使用内联语句，例如 align="center" 并尝试一下

【参考方案4】：

如果您的元素是内联块，我相信它不会以“margin: 0 auto;”为中心您可以尝试添加：

display: block;

看看是否可行。

【参考方案5】：

这是小提琴http://jsfiddle.net/XF4JM/

应该居中图像。关键是使图像成为一个块并将margin-left和margin-right应用于auto。希望这会有所帮助

img 
display:block;
margin-left:auto;
margin-right:auto;