Question

我的朋友和我正在编写一个快速的网站，并且正在解决使用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; 
}

Answer 1

为什么margin: 0 auto;无效：

可能有几个原因导致您的元素不居中。

要使margin: 0 auto;生效，元素需要设置宽度，如width: 100px;。
如果元素具有设定宽度且仍然不居中，请尝试display: block;。

这两件事总能奏效。

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

如果您只想将所有元素集中在 body标记中心，只需在body标记上使用text-align: center;即可实现此目标。

那就是说，我认为你不会这样做。

Answer 2

您需要将width设置为您要使用的margin: 0 auto;。因此，如果您想将主体置于浏览器中心，您可以执行以下操作：

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

Answer 3

首先，我假设你想像大多数网站一样集中你的网页。方法是将所有HTML元素包装在一个父div中，为其提供大多数网站遵循的标准宽度（它取决于您）。在这种情况下，我使用了960px。比父容器的自动保证金。所以你的整个页面中心完美对齐。我的建议不要使用＆＃39; br＆＃39;这样的标签，利用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; 
}
...

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

Answer 4

<center>

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

有你的小提琴....尝试使用旧的老式中心标签。 KISS

CSS边距不居中

4 个答案: