Html CSS页边距不居中_Html_Css_Margin

Html CSS页边距不居中

html css

Html CSS页边距不居中,html,css,margin,Html,Css,Margin,我的朋友和我正在编写一个快速的网站，并且在使用CSS集中元素时遇到了问题。我们已经尝试在单个元素上使用margin:0 auto命令，但没有成功。CSS工作表中所有其他样式的更改都将生效。有人能告诉我为什么margin:0 auto不起作用，或者是一种将身体中所有元素居中的方法吗 Html代码： <!DOCTYPE html> <html> <head> <title>MatchUp</title> <link rel="styl

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

这是你的小提琴…试着用老式的中心标签。亲吻

为什么边距：0自动；不起作用：

您的元素没有居中可能有一些原因

对于保证金：0自动；要工作，元素需要有一个设置的宽度，如width:100px；。如果元素具有设置的宽度，但仍然不居中，请尝试显示：block；。这两件事永远有效

如何将没有边距的图元居中：0自动；：

如果只是尝试将主体标记内的所有元素居中，则只需使用文本对齐：居中；在body标签上完成该操作

也就是说，我不认为你想这么做

您需要设置要使用边距的宽度：0 auto；。因此，如果要在浏览器中居中放置主体，可以执行以下操作：

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

首先，我假设你想像大多数网站一样把你的网页放在中心位置。方法是将所有HTML元素封装在一个父div中，并为其指定一个标准宽度，大多数网站都会按照此宽度进行操作。在本例中，我使用了960px。而不是父容器的自动边距。因此，整个页面中心完全对齐。我的建议是不要像那样使用'br'标记，利用CSS的边距属性。看一看，它会对你有很大帮助

HTML

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

我看不到页边空白：0自动；其次，在CSS中的任何地方，您都没有包装元素，所以您应该这样做，指定一些固定的宽度，然后使用margin:0 auto；而且它会起作用……不，这是一个糟糕的选择。@ScriptShiva-如果你认为这是一个糟糕的选择，那么解释一下为什么会这样，而不仅仅是投反对票。这是一个新用户，如何鼓励？@user1062478-该标签已被弃用，因此它可能不是向某人建议的最佳答案。我的朋友和我正在使用标签，但我们不喜欢他们在代码中的样子。。。我想我们在根据假设得出答案之前有点不习惯，为什么不先问问OP他们是否想要这个答案？显然，如果他们真的想把整个页面放在浏览器的中心位置，这就可以了。然而，OP明确表示，我们已经尝试在单个元素上使用margin:0auto命令，但没有成功。并将身体中的所有元素居中。这个答案并不能回答这个问题。现在，如果您要更新您的答案，以包括对原始问题的修复，然后我想知道如何将整个问题作为一个旁白，让他们选择，我将删除我的DV.+1，以解释为什么页边空白的第一部分：0自动；没用-1因为没有解释如何将所有元素居中的第二部分。再加上这个，我会再次投票。^ ^'边距：0自动；'仅当它带有“宽度：npx；”时才有效请注意这一点。宽度是使用边距自动将div居中的重要部分。+1用于解决这两个问题，为什么边距：0自动；如果这是他们真正想要的，那么如何将身体内的所有元素集中起来。这是目前为止唯一完整的答案。感谢@CodeMaverick的清理。

<center>

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

<!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>

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; 
}
...