Question

我正试图将徽标置于我的标题中心。我在我的display:block课程中尝试了margin:auto和#site-title，但它无效。

代码的链接是：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;
}

Answer 2

将此添加到#site-title

text-align: center;

Answer 3

这应该有效：

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

如何在div中居中图像

3 个答案: