Question

我正在尝试创建一个网页，其中所有内容都位于中心40％，但顶部标题似乎并未与hozrizontal导航栏居中。看看左边的空间似乎比右边的空间更大，文本比导航栏更长？

screen shot

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample test page</title>
<style>
#navigation li {
    font 34px Arial;
    display: inline-block;
    list-style-type: none;

}

#navigation a {
    background: #140913;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-size: 18px;
    padding: 5px 19px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
}

#navigation a:hover {
    background: #4a3a4a;
    text-decoration: none;
}





#text {
    width: 90%;
    margin: 0 auto;
    text-align: left;
}

#background {
    background-size: 100% auto;
}

.stretch {
    width:100%;
    height:100%;
}

body {
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    text-align: center;
    width: 50%

}

footer { 
    margin: auto; 
    text-align: center;
}


</style>
</head>

<body>
<nav>
  <div id="navigation">
  <ul>
    <li><a href="#">AAAAAAA</a></li>
    <li><a href="#">BBBBB</a></li>
    <li><a href="#">CCCCCCC</a></li>
    <li><a href="#">DDDDDDD</a></li>
    <li><a href="#">EEEEEEE</a></li>
    <li><a href="#">FFFFF</a></li>
    <li><a href="#">GGGGGGG</a></li>
  </ul>
  </div>
</nav>
<div id="background"> <br />
</div>
<div id="wordcloud">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit quisque malesuada erat sed sagittis gravida<br /> suspendisse in sem sed magna ultrices.</p>
</div>
<div id="wordclouddescription">
  <h2>The sentence will be aproximitely the same size here as on the final product, thankyou very much.</h2>
  <p>&nbsp;</p>
  <div id="text">  </div>
</div>
</body>
</html>

Answer 1

我认为你必须重置你的ul，它仍然有40px填充。

#navigation ul {
  padding: 0;
  margin: 0;
}

Answer 2

假设您从头开始并且不受WordPress，CMS等的限制，请以reset stylesheet开头。我没有从头开始的自由（我的网站的后端是由供应商运行的），但是在我的头脑中，我会使用：

    html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html将遵循边框大小调整规则：

元素的宽度和高度被视为元素的渲染宽度和高度。

默认情况下，box-sizing是填充框：

宽度和高度+填充+边框被视为元素的渲染宽度和高度。

因此默认情况下，一个200px的div，20px填充和一个1px边框，它的内容呈现为158px。 Border-box呈现相同的元素，以便相同的div将元素的内容呈现为200px。

下一个规则*, *:before, *:after { box-sizing: inherit;使其余元素遵循边框大小，但允许您选择将任何元素更改为内容框或填充框（如果需要）（可以但是，我真的想到这样做的理由很充分。）

规则padding:0; margin:0;用于所有元素，因为浏览器强加了大量隐藏的默认填充和边距。

因此，使用这些规则使元素的行为与您期望它们用于布局目的的行为非常相似。阅读this for a better explanation。

我制作了一个Fiddle的演示版，并添加了前面提到的规则。我还更改了导航的填充和边距以及#wordclouddescription，使它们看起来居中。我认为这就是你想要的东西，我不太确定，因为你没有现场演示。

Answer 3

首先，您需要重置浏览器默认样式。你可以使用来自互联网的reset.css。

截至目前，您可以使用ul {padding：0px;}样式，它将适合您的屏幕在中心。默认情况下，浏览器将采用“-webkit-padding-start：40px;” ul元素的样式，所以你需要使用这种样式删除该购买 ul {padding：0px;}。

一个元素不能居中，因为看起来不对劲

3 个答案: