如何在 div 中使图像居中

Question

我正在尝试将徽标置于我的标题中。我在#site-title 课程中尝试了display:block 和margin:auto，但它不起作用。

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

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

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

谢谢！

Answer 1

这应该有效：

#header {
width: 500px;
margin: 0 auto;
}
</style>
<div id="header">
<!-- div content here -->
</div>

Answer 2

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

如果这是您所指的代码：

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

Answer 3

将此添加到#site-title

text-align: center;