如何在div中居中放置圖像

Question

我試圖將徽標放在標題的中心。 我在#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的float: left 。 沒必要
2.請注意，您padding-right of 40px會導致width: 100%問題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;
}

Answer 2

將此添加到#site-title

text-align: center;

Answer 3

這應該工作：

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