Question

我是HTML，CSS的新手。我正在尝试使用Dreamweaver创建一个网页。

现在我的页面中只有3件事。一个h1标题，中心对齐，一个段落和一个列表。

我通过使用“px”定位，将段落和列表准确地放在Dreamweaver实时浏览器中页面的中心。但是这个位置在Firefox中完全被忽略了，在Chrome中也是如此。即使标题不在中心对齐的中间。当我重新调整窗口大小时，列表保持固定，但标题和段落根据窗口大小移动。

请解释这里发生的事情以及解决方法。再说一遍，我是新手！

...谢谢

这是我的HTML文件：

<!doctype html>
<html>
<head>
<title>My web page</title>
<link href="mycss.css" rel="stylesheet" type="text/css">
<h1>Welcome!</h1>
<body>
<nav id="nav">
<ul>
<li><a href="url">Home</a></li>
<li><a href="url">About Me</a></li>
<li><a href="url">Importent Links</a></li>
</ul>
</nav>
<p>About Me</p>
<p>About Me</p>
</body>
</html>

这是我的css文件：

h1 {
    text-align: center;
}

nav {
    display: block;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: #202020;
    list-style-type: none;
}

p {
    display: block;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: 202020;
    top: -2em;
    position: relative;
    left: -19em;
}
ul {
    list-style-type: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;
    left: 22em;
    top: -2em;
}

a {
    text-decoration: none;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    float: left;
    border: 1px none #000000;
    position: static;
}
a:link {
    color: #77AED5;
}
a:hover {
    color: #418CC5;
}
a:visited {
    color: #6D4AFB;
}

小提琴：http://jsfiddle.net/txZ5K/

Answer 1

中间是相对的。你不能为此目的指定一个常量，因为每个设备和屏幕都有自己的尺寸，而另一个设备的正确性是错误的。你可以做的是例如设置Position:relative，margin-left:auto，margin-right:auto。或添加<center>标记，具体取决于您的具体情况。如果您发布代码，我们可能会提供更多帮助。

修改

发布您的代码后，我会邀请您学习一些CSS，尤其是positioning，display和浮动。
请注意，当您使用position:relative和left值设置top时，它将附加到此固定位置而非动态。

这是对代码demo的修改。不要忘记参考提供的链接以获取更多信息;）祝你好运

Answer 2

这可能是position不是您想要解决此问题的情况。相反，在段落块上使用margin: 0 auto应将其对齐在其父宽度的中心。 li不是需要居中的。您最好将父ul的CSS设置为display: block; margin: 0 auto;以使列表居中。

Answer 3

这就是你想要的吗？

HTML

<h1>Welcome!</h1>
<nav id="nav">
<ul>
<li><a href="url">Home</a></li>
<li><a href="url">About Me</a></li>
<li><a href="url">Importent Links</a></li>
</ul>
</nav>
<p>About Me</p>

CSS

* {
    text-align:center
}

h1 {
    text-align: center;
}

nav {
    display: block;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: #202020;
    list-style-type: none;
}

p {
    display: block;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: 202020;
    position: relative;
}

ul {
    list-style-type: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;
}

ul li {
    display:inline-block;
}

a {
    text-decoration: none;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px none #000000;
}

a:link {
    color: #77AED5;
}

a:hover {
    color: #418CC5;
}

a:visited {
    color: #6D4AFB;
}

小提琴：http://jsfiddle.net/txZ5K/2/

关于HTML元素位置

3 个答案: