센터 이미지 및 텍스트

제목 표시 줄이라는 div가 있습니다. 이 제목 표시 줄의 너비는 100 %입니다. 내 제목 표시 줄 안에 나는 제목을 가운데 놓기를 원하며 내 제목 옆에 아이콘을 표시하려고합니다. 제목 + 아이콘 콤보는 서로 옆에 놓여져 있어야합니다.센터 이미지 및 텍스트

이렇게 어렵지는 않지만 이미지 윤곽을 사용하고있어 문제가 발생하여 <img> 태그를 사용할 수 없습니다 (아이콘이 일부 요소의 배경이되어야 함).

누구나 해결 방법에 대한 아이디어가 있습니까?

이에 대한 지금까지의 내가 (실제 성공) 올 것 같다 : 이 http://jsfiddle.net/Tw33Y/2/

출처

2011-09-12 Henrik Andersson

질문을 이미 jsfiddle로 가지고있는 것에 대한 예제로 업데이트 할 수 있습니까? – diagonalbatman

이 현대적인 브라우저에서 달성하기 매우 쉽다. 이것이 당신의 HTML 인 경우 :

.titlebar { 
    text-align: center; 
} 

.title-sprite { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    background: url(http://www.alistapart.com/d/sprites/sprites.gif) -36px -24px no-repeat; 
}

이것은 IE7에서 작동하지 않습니다 또는 당신이 일을해야하는 경우 이전, 당신은 몇 가지 해킹을 추가해야합니다

<div class="titlebar"> 
    <div class="title-sprite"></div> 
    Title Text 
</div>

은 그 다음의 스타일이 CSS를 사용 .

출처

2011-09-12 12:50:17 andrewmu

내 브라우저에서는 정상적으로 작동하지만 IE7에서도 제대로 작동하도록하고 싶습니다. 해당 브라우저에서 작동하도록 특별한 해킹이 있습니까? –

.titlebar CSS'zoom : 1;에서이 방법이 효과가있을 것이라고 생각합니다. * display : inline;' – andrewmu

그리고 IE6에서는'_height : 32px' (또는 무엇이든)가 필요하다고 생각합니다. – andrewmu

센터 이미지 및 텍스트

답변

관련 문제