0

我试图在我的标题中将徽标居中。我在课堂上尝试了display:blockand ，但它不起作用。margin:auto#site-title

代码的链接是： http: //pastebin.com/iNvhTSBL 而CSS是： http: //pastebin.com/f5mPTjuU

我不知道该怎么办......也许我没有正确地做 CSS？

任何帮助，将不胜感激！CSS 来自 wordpress 主题，只是让大家知道。

谢谢！

4

3 回答 3

1

下次，只在您的问题中发布相关代码位。这使得人们更有可能费心回答。

如果这是您所指的代码：

<div id="header">
            <div id="site-title">
                    <a href="http://www.panduzee.com/wordpress"><img src="http://i.imgur.com/ysxPP.jpg"></a>
            </div>
            <!-- other bits stripped for brevity -->
            <div class="clear"></div>
    </div>

CSS是这样的：

#header {
    border-bottom: 1px solid #dedfe0; 
    padding-bottom: 50px;
}
#site-title { 
    float: left; 
    width: 100%; 
    padding-right: 40px; 
    overflow: hidden; 
    line-height: 27px; 
    font-size: 23px; 
    display:block; 
    margin: auto;
}  
#site-title a {
    color: #333; 
    font-weight: bold; 
    text-decoration: none; 
}

然后你需要修改css如下：
1.float: left从site-title中删除。不必要的。
2. 请注意，您padding-right of 40px将导致您的问题width: 100%
3. 添加text-align: center;到站点标题。
4.添加margin: 0 auto;到您的站点标题

以下代码将执行您想要的操作：

#header {
    border-bottom: 1px solid #dedfe0; 
    padding-bottom: 50px;
}
#site-title { 
    width: auto; 
    padding-right: 40px; 
    overflow: hidden; 
    line-height: 27px; 
    font-size: 23px;  
    text-align: center;
}  
#site-title a {
    color: #333; 
    font-weight: bold; 
    text-decoration: none; 
    margin: 0 auto;
}
于 2012-04-26T02:30:44.057 回答
0

将此添加到#site-title

text-align: center;
于 2012-04-26T02:25:19.643 回答
0

这应该有效： 

#header {
width: 500px;
margin: 0 auto;
}
</style>
<div id="header">
<!-- div content here -->
</div>
于 2012-04-26T02:31:17.207 回答