CSS边距不居中答案

【问题标题】：CSS Margins Not CenteringCSS边距不居中
【发布时间】：2014-02-08 23:45:52
【问题描述】：

我和我的朋友正在编写一个快速网站，但在使用 CSS 将元素居中时遇到了问题。我们已经尝试在单个元素上使用margin: 0 auto 命令，但它不起作用。所有其他样式都从 CSS 工作表更改。谁能告诉我为什么margin: 0 auto 不起作用或将所有元素集中在正文中的方法？

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>MatchUp</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>

<body>

<br>
<img id="banner" src="banner.png" alt="Banner" width=1000 height=300>
<br>
<form>
<input id="name" type="text" name="whateva"<br>
<br>
<input id="heart" type="image" src="heart.png" width=250 height=250>
</form>
<br>

</body>

</html>

CSS 代码：

body{
background-image: url('bg.jpg');
}

#name{
height: 30px;
width: 200px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: 0; 
}

【问题讨论】：

我在 CSS 中的任何地方都看不到 margin: 0 auto;，其次，你还没有包装元素，所以你应该这样做，分配一些固定的 width，而不是使用 margin: 0 auto;，然后它会工作......
<input id="name" type="text" name="whateva"<br> 和 <link rel="stylesheet" type="text/css" href="style.css" 没有关闭？并且 CSS 中没有 `margin' 标签

标签： html css margin

【解决方案1】：

为什么margin: 0 auto; 不起作用：

您的元素未居中可能有几个原因。

要使margin: 0 auto; 起作用，一个元素需要有一个像width: 100px; 这样的设置width。
如果元素具有设定的宽度并且仍然没有居中，请尝试display: block;。

这两件事总是有效的。

如何在没有margin: 0 auto;的情况下使元素居中：

如果您只是想让所有元素在 body 标签中居中，只需在 body 标签上使用 text-align: center; 即可。

也就是说，我认为您并没有尝试这样做。

【讨论】：

+1 用于解决这两个问题，为什么 margin: 0 auto; 不起作用他们真的想要。这是迄今为止唯一完整的答案。
感谢@CodeMaverick 的清理工作。

【解决方案2】：

首先，我假设您想像大多数网站一样将您的网页居中。方法是将所有 HTML 元素包装在一个父 div 中，为其提供大多数网站遵循的标准宽度（由您决定）。在这种情况下，我使用了 960 像素。比父容器的自动边距。所以你的整个页面中心完美对齐。我的建议不要使用这样的“br”标签，利用 CSS 的边距属性。看看Bootstrap，对你有很大帮助。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>MatchUp</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="pageContainer">
        <img id="banner" src="banner.png" alt="Banner" width=1000 height=300 />
        <form>
            <input id="name" type="text" name="whateva" />
            <input id="heart" type="image" src="heart.png" width=250 height=250 />
        </form>
    </div>
</body>
</html>

CSS

body{
    background-image: url('bg.jpg');
}

#pageContainer {
    width: 960px;
    margin: 0 auto;
}

#name{
    height: 30px;
    width: 200px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    outline: 0; 
}
...

这将为您提供一个很好的居中页面。如果您需要任何帮助，请发表评论。

【讨论】：

在基于假设创建答案之前，为什么不先询问 OP 是否这是他们想要的？显然，如果他们真的想在浏览器中将整个页面居中，那就可以了。但是，OP 明确表示我们已经尝试在单个元素上使用margin: 0 auto 命令，但它不起作用。 并将正文中的所有元素居中。而这个答案并没有回答这个问题。现在，如果您要更新您的答案以包含对原始问题的修复，并且然后提到如何将整个事情居中以供他们选择，我将删除我的 DV。

【解决方案3】：

你需要在你想使用margin: 0 auto;的地方设置width。因此，如果您想在浏览器中居中显示正文，您可以执行以下操作：

body
{
    background-image: url('bg.jpg');
    margin: 0 auto;
    width: 900px;
}

【讨论】：

+1 用于解释为什么margin: 0 auto; 不起作用的第一部分。 -1 不解释如何使所有元素居中的第二部分。添加它，我会再次投票。
^_^ 'margin: 0 auto;'仅当它带有“宽度：npx;”时才有效请注意这一点。宽度是使用自动边距使 div 居中的重要部分。

【解决方案4】：

<center>

http://jsfiddle.net/pellmellism/T26Pw/

这是你的小提琴......尝试使用老式的中心标签。亲吻

【讨论】：

不，这是个糟糕的选择。
@ScriptShiva - 如果您认为这是一个糟糕的选择，请说明原因，而不仅仅是投反对票。这是新用户，给点鼓励怎么样？
@user1062478 - <center /> 标签已被弃用，因此它可能不是向某人建议的最佳答案。 Take a look at this answer for clarification on deprecation.
我和我的朋友使用了<center></center> 标签，但我们不喜欢它们在代码中的样子……我想我们有点强迫症