中心將H1標籤與圖像的左側和右側對齊

Question

我試圖找到一種方法，將包含圖像的塊在H1標籤的左側和右側對齊。圖像需要包裝h1標籤。 h1標籤需要能夠與標題的大小增長：

<div class=titlewrap"> 
    <img src="/images/hl.png" class="dl"> 
     <h1 class="title">Gallery</h1> 
    <img src="/images/hr.png" class="dr">  
</div> 

Answer 1

嘗試：

<style> 
.titlewrap .dl, .titlewrap .dr{ 
    vertical-align:middle; 
} 
.titlewrap .title{ 
    display:inline-block; 
    *display:inline; 
} 
</style> 

Answer 2

如果是這樣的UI（不是內容）的一部分 - 墊H1的左側，使用CSS背景圖像，然後做與包裝相同（但是填充右端）。使用background-position將圖像向左或向右對齊。

Answer 3

嘗試：

.titlewrap { float: left; left: 50%; position: relative} 
.titlewrap > * {float:left; left: -50%}​ 

Answer 4

什麼工作對我來說是：

HTML標記：

<h1> 
    <img src="img1.png" alt="back"> 
    This is the H1 text 
    <img src="img2.png alt="logo"> 
</h1> 

CSS標記：

h1 { 
    position: relative; 
} 

img[alt="back"] { 
    position: absolute; 
    left: 20px /* Distance from the left side of the 
        page where you want the image*/ 
} 

img[alt="logo"] { 
    position: absolute; 
    right: 20px /* Distance from the right side of the 
        page where you want the image*/ 
}