Question

我的导航栏上的链接出现了问题。我使用了很多标签，比如文本对齐，你现在在我的代码中看到的，仍然不在中心，你能帮我解决这个问题吗？我依靠你们！谢谢

这是我的垃圾箱 - ＆gt; http://jsbin.com/towemisa/1/
你可以点击＆＃34;编辑bin＆＃34; o右上角

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>

<body>
    <center>
    <div class="page">
      <div class="header">
        <h1> Evergreen </h1>
        <h3> Free information for you! </h3>
        <div class="sublinks">
            <a href="index.html">Home  |</a>
            <a href="contact.html">Contact  |</a>
            <a href="login.html">Login  |</a>
            <a href="register.html">Register</a> <br>
            <h3 style="color:white">Search</h3>
            <input type="text" size="30"/>
        </div>
      </div>
    </div>

    <div class="linkspart">
        <a href="index.html">Home</a>
        <a href="aboutus.html">About us</a>
        <a href="download.html">Download</a>
        <a href="gallery.html">Gallery</a>
    </div> 
    </center>
</body>

</html>

CSS

body {
    background-color:#b2b200;
}

.page {
    width:1000px;
    height:auto;
}

.header {
    width:1000px;
    height:100px;
}

.header h1 {
    color:white;
    float:left;
    left: 45px;
}

.header h3 {
    color:grey;
    float:left;
    position:absolute;
    top:45px;
}

.header .sublinks {
    width:400px;
    height:90px;
    float:right;
    position:relative;
    margin-top:20px;
    margin-left:65px;
}

.header .sublinks a {
    text-decoration:none;
    color:white;
    position:relative;
    top: 10px;
}

.header .sublinks a:hover {
    color:black;
}

.header .sublinks h3 {
    position: absolute;
    top: 20px;
    left: 20px;
}

.header .sublinks input {
    position: relative;
    top: 17px;
    border-radius: 15px;
}

.linkspart {
    width:1000px;
    height: 40px;
    background-color:white;
    border-radius:10px;
}

.linkspart a {
    text-decoration:none;
    color:black;
    position:relative;
    top: 10px;
    margin-left: 50px;
}

Answer 1

您的代码：

.header .sublinks {
    width:400px;
    height:90px;
    float:right;
    position:relative;
    margin-top:20px;
    margin-left:65px;
}

编辑代码：

.header .sublinks {
    width:400px;
    height:90px;
    float:right;
    position:relative;
}

您设置了margin-top:20px;和margin-left:65px;，这就是您无法center链接的原因。只需删除margin-left和margin-right

即可

的jsfiddle：

http://jsfiddle.net/YpLa8/

Answer 2

它将无法工作，因为您设置了包装div的左边距因为您设置了宽度，所以如果将margin设置为auto

，它将正常工作

.header .sublinks {
width:400px;
height:90px;
float:right;
position:relative;
margin:auto;
}

为什么我不能将这些链接置于中心？

2 个答案: