文本和圖像在同一行

我有一個標誌和標題圖像。當我嘗試將標題圖像居中時，它似乎進入下一行。我如何保持它在同一行？文本和圖像在同一行

Website

由於

來源

2014-06-28 Arjun Naha

使用適用於徽標圖像的「float：right」並在標頭之前放置其標籤。 Rgds， –

@AlexBell你可以解釋一點點（或者發送一個jsFiddle！）。謝謝 –

請把你的原始代碼放在jsFiddle中，然後我會看看它。 Rgds， –

在div是塊元素，這會導致它出現在一個新行。

<div align="center"> 
<img width="500" height="auto" src="img/text.fw.png" alt="RCC"> 
</div>

要麼除去div和圖像與邊際位置，或使用位置：絕對使其顯示在上面的標誌的頂部上的層。

<div align="center" style="position:absolute;top:40px;width:100%;text-align:center"> 
<img width="500" height="auto" src="img/text.fw.png" alt="RCC"> 
</div>

（僅用於演示內聯樣式）

你也可以給股利負邊距分流它的頁面。

另一種方法是將徽章作爲div的背景圖像，並將文本置於頂部....提供許多可能的解決方案。

來源

2014-06-28 14:18:53

我將如何定位圖像的邊距（你能告訴我（我是一個n00b）） –

它建立在基金會，我需要保持它的抵抗力！ –

喜歡這個 - http://jsfiddle.net/CjHg2/ –

試試這個：http://jsfiddle.net/CZ86G/1/

你的圖片都是內聯元素。所以只需刪除div並垂直對齊兩個圖像：

img { 
    vertical-align: middle; 
}

這個組合的移除代碼和這個就足夠了。

來源

2014-06-28 14:24:59 hurrtz

這是要走的路！ –

他想讓它集中對齊，而不是垂直對齊，我想（可能是左邊的徽章）。內嵌塊元素不能像這樣集中對齊。 –

文本和圖像在同一行

回答

相關問題