Question

我正在浏览器中间寻找我的网站中心。这是我的网站：

http://marcosballester1.hol.es/test/test2.html

左侧正确居中，但右侧没有。代码：

<style>
#wrapper {
    width: 50%;
    margin: 0 auto;
}
</style>
<div id="wrapper">
<body>
   HOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLA</body>
</div>

Answer 1

您的原始答案和第一个答案都按预期工作。见JSFiddle

我添加了一个background-color属性，以显示您隐藏div的宽度。 div以页面为中心，但文本在框外溢出，因为它是一个连续的单词，而您的浏览器并不想分解单个连续单词。如果您在该框中有多个单词，例如hello hello hello ...，则不会出现问题，因为它们会自动换行。

如果您想强制文字换行，可以使用word-wrap: break-word属性，如this example所示。

Answer 2

您有错误你必须在 div

之前加上 div

.wrapper {
    width: 900px;
    margin: auto; //to center div
}

<div class="wrapper">
Hello
</div>

如何正确中心网站

2 个答案: