텍스트를 가운데 맞춤하는 경우 배경 이미지를 어떤 화면 크기로 배치하는 방법?

Question

텍스트가 가운데 맞춤이면 배경 아이콘 이미지를 어떻게 정렬합니까? 텍스트 앞에있는 작은 아이콘과 같습니다. 이 가운데 정렬이 아니라면, 나는 같은 것을 사용할 수 있습니다

p { 
    background: url(image.jpg) no-repeat 0 0; 
    padding-left: 40px; 
} 

을하지만 난 그렇게처럼 가운데 정렬하는 경우 :

가

p { 
    background: url(image.jpg) no-repeat 0 0; 
    padding-left: 40px; 
    text-align: center; 
} 

배경 왼쪽 모서리에 남아있는 텍스트를 중심으로 동안 (그래서 그들 사이에 큰 차이가 있습니다). 배경 위치를 사용할 수도 있지만 화면 크기가 내가 사용하는 것과 다른 경우 배경이 텍스트로 겹쳐집니다.

당신은 jsFiddle 데모를 확인할 수 있습니다

http://jsfiddle.net/PvL3T/2/

Answer 1

:first-letter 의사 요소, 주변에 좋은 재생됩니다 http://jsfiddle.net/PvL3T/7/

p { 
    padding-left: 40px; 
    text-align: center; 
} 

.resize:first-letter { 
    background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 50%; padding-left: 20px; 
} 

이 당신이 걱정하는 경우 IE6으로도 작동하지만 선택과 개방 곡선 브라켓 사이에 공백이 있으면됩니다. 만 IE6이 p:first-letter{... 같은이 작동하지 않습니다,하지만 p:first-letter {...는

그냥 비슷한 방법으로, 당신은 :first-line

Answer 2

시도 :

background: url(image.jpg) no-repeat center; 

또는 대안 :

background-position: center; 

Answer 3

하면이 아이콘 플로트 인라인을 찾고 있다면 텍스트 옆에 부모 태그 안에 배치하는 것이 좋습니다. 그리고 배경 이미지에 관계없이 화면 크기의 텍스트와 함께 떠 수 있습니다

http://jsfiddle.net/PvL3T/4/

HTML :

<p><i class="icon"></i>This is a text that is center aligned.</p> 

CSS : 당신은 표시되는 선 블록을 추가 할 필요가

p { 
    text-align: center; 
} 

p .icon { 
    background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 0; 
    width: 12px; 
    height: 12px; 
    display: inline-block; 
    margin-right: 10px; 
} 

Answer 4

텍스트 전에 요소입니다. 그래서 그것은 당신의 텍스트 내용과 함께 갈 수 있습니다. 예 : http://jsfiddle.net/PvL3T/5/

.icon 
{ 
    background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat center center; 
    width: 1em; 
    height: 1em; 
    display: inline-block; 
}​