自动页边距不在页面中居中

97

在此示例中，图像未居中。为什么？我的浏览器是Windows 7而非Google上的Google Chrome v10。

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

— 网站设计者
source

测试了一个样式类，我发现这不是有效的margin：0 auto; 经过一些测试后发现，如果要添加到元素中的类名与元素具有相同的名称，则将无法使用。

— LostLight

218

添加display:block;，它将起作用。图片默认为内联

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

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

— 罗斯
source

12

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

— Phrogz 2011年

1

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

— 罗斯，

15

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

— 窃窃私语者

但是它仍然没有居中。它只是水平居中。我想将其垂直居中，但是即使更改0px auto为auto它也无法正常工作。

— 亚伦弗兰克

14

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

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

— 布伦丹
source

1

margin: 0 auto只要它们是没有浮点且具有指定宽度的块元素，就可以在相对定位的元素上正常工作……

— Ennui 2014年

我认为这很讽刺。如果您编辑答案以确保答案不正确，那么我将删除该否决票。我一直在写CSS了近15年，能不记得不能正常工作水平居中相对定位固定宽度的元素自动利润率-尽管其他属性，如float和display可以改变这种行为。

— Ennui 2014年

14

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

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

— 相同的
source

1

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

— ThatsJustCheesy

1

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

— zkytony

10

就我而言，问题是我设置了最小和最大宽度而没有宽度本身。

— 丹尼尔·西塔兹（Daniel Sitarz）
source

3

回顾：element必须为position:static，具有固定width:集合并为一个display:block元素

— Joey T

这也是我的宽度问题-引导程序自动将我的div设置为使用100％可用

— Edmund Sulzanok 2015年

6

每当我们不添加width和add时margin:auto，我想它就行不通了。根据我的经验。宽度给出了需要在何处提供相等边距的想法。

— tejaswini裤子
source

2

有一种替代方法margin-left:auto; margin-right: auto;或margin:0 auto;针对使用position:absolute;这种方法的替代方法：
将元素的左侧位置设置为50％（left:50%;），但不能正确居中以使元素正确居中，您需要给它一个减去宽度的一半的边距，将使元素完美居中

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

— 安德烈
source

0

对于引导按钮：

display: table; 
margin: 0 auto;

— 亚伯兰
source

0

把它放在身体的CSS中：background：＃3D668F; 然后添加：display：block; 保证金：自动；到img的CSS。

— 盖尔
source