H1 태그를 이미지의 왼쪽과 오른쪽에 가운데 정렬

Question

H1 태그의 왼쪽과 오른쪽에 이미지가 포함 된 블록을 가운데 정렬하는 방법을 찾으려고합니다. 이미지는 h1 태그를 래핑해야합니다. 다음 수행합니다 CSS 배경 이미지 패드 H1의 왼쪽 및 사용 -이이 UI (안 내용)의 일부인 경우

<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

다음 H1 태그는 제목의 크기로 성장 할 수 있어야합니다 래퍼와 동일합니다 (그러나 오른쪽 끝을 채 웁니다). 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*/ 
}