我該如何中心<img /><h1>...</h1><img /> HTML + CSS？

，這是令人沮喪的我...我試圖讓事情看起來像這樣：我該如何中心<img /><h1>...</h1><img /> HTML + CSS？

Logo 

img|h1|img

周圍的字幕中的照片僅僅水平線，看起來像這樣

---字幕---

這裏的HTML：

<div> 
    <a href="#"> 
    <img class="logo" src="#" alt="..."/></a> 
</div> 
<div class="subtitle"> 
    <img class="1" src="#" width="60" height="1" alt="..."/> 
    <h1>subtitle text</h1> 
    <img class="2" src="#" width="60" height="1" alt="..."/> 
</div>

我試圖放置另一DIV內的元件並限定一寬度：％;對於具有餘量的div：0 auto;但問題在於，如果用戶在瀏覽器中增加文本大小，右側圖像將移動到下一行。

任何幫助將是偉大的。謝謝！

來源

2012-10-10 Alex

有很多方法可以做到這一點。看看'float：left'，'display：table-cell'，'column-count'，和/或'display：inline-block'（它們都有優點和缺點，最好的解決方案取決於各種參數）。 – ACJ

你介意如果我編輯你的問題以擺脫所有這些管道，並用前置塊代替它們嗎？ – Daedalus

當然，對不起，這是我第一次使用這個網站:-D – Alex

嘗試把塊H1元素中內嵌的img標籤，然後造型的H1標籤如下：

CSS：

h1{ 
width: 100px; /* whatever width you prefer*/ 
text-align: center; 
}

Html：

<h1> 
    <img class="1" src="#" width="60" height="1" alt="..."/> 
    subtitle text 
    <img class="2" src="#" width="60" height="1" alt="..."/> 
</h1>

示例：http://jsfiddle.net/sujvM/注意：由於某些原因，您需要點擊運行按鈕以在jsfiddle中加載圖像。

來源

2012-10-10 00:38:20

將img標籤放在h1元素內就像一個魅力一樣。謝謝！ – Alex

沒問題，很高興我能幫到你。這是有效的，因爲H1是塊級元素，而img標籤是內聯元素。 –

您可以使用display: inline和white-space: nowrap來實現：

.subtitle { 
    text-align: center; 
    white-space: nowrap; 
} 
.subtitle h1 { 
    display: inline; 
}

來源

2012-10-10 00:37:08 nathan

我該如何中心<img /><h1>...</h1><img /> HTML + CSS？

回答

相關問題