0

我的 HTML-5 代码的一部分:

<header id="main">
    <a href="#" id="exit"></a>
    <a href="http://www.reddit.com/" id="reddit"></a>
    <a href="http://www.stackoverflow.com/" id="stackoverflow"></a>
    <a href="http://www.facebook.com/" id="facebook"></a>
    <a href="#" id="title"></a> 
</header>

CSS-3 代码:

#main{
    height: 220px;
    width: auto;
    border: 2px #000000 solid;
}

#title{
    float: left;
    background: url(title.jpg) no-repeat;
    padding: 90px 145px;
    margin: 20px auto;
    border: 2px #000000 solid;
}

我在两个 ID 上都设置了边框,以使其更易于可视化。我不知道为什么我的标题图像没有居中。从上面的代码看起来是这样的:

在此处输入图像描述

这是 JSFiddle:http: //jsfiddle.net/5nWag/2/

4

1 回答 1

0

标题图像未居中,因为您正在使用float: left;并且我认为您正在将其用于id="exit".
尝试将 facebook、stack、red 放入 div 中position: absolute;。接下来为退出做同样的事情。

这应该是您的主要形象的风格。

background: url(title.jpg) no-repeat;
padding: 90px 145px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 20px;
border: 2px #000000 solid;
于 2013-06-11T10:09:41.270 回答