css - 如何在div中将图像居中

Question

我试图将 Logo 置于页眉的中央。我在我的 #site-title 类中尝试了 display:block 和 margin:auto，但它不起作用。

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

我不确定该怎么做...也许我没有正确执行 CSS？

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

谢谢!

Answer 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。没必要。
2. 请注意，您的 padding-right of 40px 会导致您的 width: 100%
出现问题 3. 添加text-align: center;到网站标题。
4. 将 margin: 0 auto; 添加到您的站点标题 a

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

#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;
}