自动页边距不会使页面中心居中图像

在this example图像不居中。为什么？我的浏览器是Windows 7上的Google Chrome v10，而不是IE。自动页边距不会使页面中心居中图像

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

来源

2011-04-20 Web_Designer

检测出的样式类，我发现，这是不工作**保证金：0汽车; **在一些测试发现，如果类名你正在添加到与元素具有相同名称的元素，这将无法工作。 – LostLight 2015-03-13 18:22:19

178

add display:block;它会工作。图像默认为内联

为了说明，block元素的默认宽度为auto，这当然会填充包含元素的整个可用宽度。

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

来源

2011-04-20 17:24:40 Ross

+11

+1正确。如果您详细阐述了'margin：auto'在流程中居中所需的内容，会做出很好的回答。（'display：block'或'display：table'，'position：static'或'position：relative'等） – Phrogz 2011-04-20 17:26:14

噢，好的，谢谢！ – 2011-04-20 17:27:14

@Progro同意;补充说明一些。 – Ross 2011-04-20 17:33:08

在某些情况下（如早期版本的IE浏览器，蛤蚧，Webkit的）和继承，与position:relative;元素将防止margin:0 auto;无法工作，即使top，right，bottom，并left未设置。

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

来源

2012-08-21 15:00:33 Brendan

'margin：0 auto'在相对定位的元素上工作得很好，只要它们是没有浮点数和指定宽度的块元素... – Ennui 2014-07-02 12:42:36

我认为这是讽刺。如果你编辑你的答案，使其不准确，我会删除downvote。我已经写了近15年的CSS，并且永远不会记得汽车边距不能用于水平居中相对定位的固定宽度元素 - 尽管其他属性如“float”和“display”可以改变这种行为。 – Ennui 2014-07-02 18:36:36

在我的情况下，问题是我已经设置了最小和最大宽度没有宽度本身。

来源

2013-01-31 17:36:44

to recap：元素必须是'position：static'，有一个固定的'width：'set并且是一个'display：block'元素 – 2013-06-26 01:18:46

这也是我的宽度问题 - bootstrap自动设置我的div使用100％可用 – 2015-03-03 13:55:30

每当我们不添加宽度，并添加margin:auto，我想这是行不通的。这是我的经验。宽度给出了它需要提供相等边际的准确位置。

来源

2013-03-28 22:08:35

存在于margin-left:auto; margin-right: auto;或margin:0 auto;为使用position:absolute;这是怎样的那些一个选择：
您元素的左侧位置设置为50％（left:50%;），但不会为了正确居中的元素要正确居中，你需要给它减一半它单曲宽度的保证金，那将围绕你的元素完美

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

来源

2014-03-26 01:15:10 Andrei

可以自动居中宽格使用display:table;

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

来源

2016-02-04 09:29:01 sameeuor

对于引导按钮：

display: table; 
margin: 0 auto;

来源

2017-03-17 18:42:14 Abram

自动页边距不会使页面中心居中图像

回答

相关问题