如何使用css在中間對齊此標頭

我正在使用bombax wordpress主題。由於描述沒有顯示出來，當我使用頭像的圖像時，我決定調整html/css以在頭部中間顯示網站標語。如何使用css在中間對齊此標頭

這是我想中心的圖像（無需左邊的標誌重疊，與站點名稱葉）： http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png

這是原來的主題HTML ：

<div id="headerwrap"> 
    <div class="clear"></div> 
    <a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);"> 
     <img src="http://www.noticiasnaturais.com/wp-includes/images/logoHeader.png" alt="Notícias Naturais" title="Notícias Naturais"> 
    </a> 
</div>

我然後試圖改變如下，加入ADIV圍繞HREF到它漂浮到左邊，添加一個外層div漂浮到右（填充裏最高空間）和第三個div在中間對齊。

<div id="headerwrap"> 
    <div class="clear"></div> 
    <div style="float:left"><a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);"> 
    <img src="http://www.noticiasnaturais.com/wp-includes/images/imagefile" alt="Notícias Naturais" title="Notícias Naturais"> 
    </a></div> 
    <div style="float:left;height: 100%";align=center><img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png"> 
    </div> 
</div>

編輯：只是澄清問題，我需要與文本的圖像在徽標的右側。此時我直接在背景圖像上顯示，但這不適用於所有屏幕分辨率。沒有任何建議（迄今爲止）能夠做到。

來源

2013-11-26 Eco Nom

請檢查更改，我希望我得到所有關閉div權。 –

我不知道的你所要求的100％，但我認爲你需要做的是這樣的：

<div style="float:left;height: 100%; margin-left:auto; margin-right:auto;">

這應該居中的圖像。

來源

2013-11-26 07:10:56 Saffron

當您從div中刪除float: left並添加clear: both; text-align: center時，它會在整個寬度上延伸並保持在樹葉圖像下方。那麼你有居中的圖像

<div style="clear: both; height: 100%; text-align: center"> 
    <img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png"> 
</div>

JSFiddle

注意，該align屬性已被棄用。

更新：

當你想在同一行文字圖像期間，你必須給與text-align: center

HTML

<div id="middle"> 
    <img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png"> 
</div>

之前的最小寬度爲 div和中心

CSS

#middle { 
    min-width: 800px; 
    text-align: center; 
}

JSFiddle

來源

2013-11-26 07:29:44

感謝您的回答，但這會在圖片下留下徽標下方的文字，而不是在右側。我也嘗試使用「vertical-align = middle」，但這也沒有幫助。 –

如何使用css在中間對齊此標頭

回答

相關問題