Question

为什么我似乎无法将此标题集中在此页面上？我需要帮助将我的标题集中在此页面上的Shop上。我需要将它分开吗？

<!DOCTYPE html>
<html>
<head>
<title>EvenDoper.com</title>
<center>
<img src="ED1.psd"  width="719" height="159" alt="ED1">
</center>
<style>
ul {
    float: left;
    list-style: none;
    position: relative;
    left: 50%;
}
li {
    display: block;
    float: left;
    position: relative;
    right: 65%;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#00a651;
background-color:#FFFFFF;
text-align:center;
padding:0px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FFFFFF;
}

h1 {color:#FFFFFF;}
h1 {text-align:center;}
h1
{
background-color:#00a651;
}
</style>
</head>
<body>
<ul>
<li><a href="shop.html">&#9889;Shop</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
<br>
<h1>Shop</h1>
</html>

Answer 1

首先，您的语法存在很多问题。例如，您需要在<img>代码中移动<body>代码。您还需要移动<h1>代码底部的<body>代码。看看Mozilla的Introduction to HTML，了解有关正确的HTML语法和标记的更多信息。

其次，我建议（与社区的其他人一起，很可能），对于如此多的CSS样式，你使用外部CSS文件。有关改进代码的信息，请参阅此 JSFiddle 。访问Mozilla的CSS developer guide，获取有关CSS的一些详尽信息。

您的“商店”文字偏离中心有两个原因：

一个：因为float位置上有一些未解决的CSS条目。 CSS代表 Cascading Style Sheets，这意味着样式级联从上到下;订单很重要！如果您float中的某个元素CSS，则需要在下一个元素中clear。否则，从那里开始的所有CSS属性都将应用相同的float属性。

二：您没有为任何CSS属性设置宽度，因此文档可能会尝试使用<img>标记的宽度您的HTML，即719px。这使得“商店”文本基本上以width: 719px;为中心。我在上面的JSFiddle链接中添加了这些修复，但为了冗余，这里是您应该用<h1>代码替换的CSS代码：

h1 {
    clear: both;
    width: 100%;
    color: #FFFFFF;
    text-align:center;
    background-color:#00a651;
}

Answer 2

这会对您有所帮助：http://jsfiddle.net/L2nZQ/5/

但你真的应该开始学习基础知识。

<html>
<head>
    <title>Your Title</title>
    <style>Your CSS</style>
</head>
<body>
    Your Code
</body>
</html>

这是一个很好的网站http://www.w3schools.com/

您可以在http://validator.w3.org/

验证您的代码

在保持当前导航栏定位的同时居中标题

2 个答案: