CSS를 사용하여 배경 이미지 ABOVE 텍스트를 어떻게 배치합니까?

Question

HTML을 매우 단순하게 유지하려고합니다.

.wizardbar 
{ 
    display:table;   
    padding:0; 
    margin:0; 
    white-space:wrap; 
    list-style-type:none; 
} 
* html .wizardbar { 
    display:inline-block; 
    width:1px; 
    padding:0 2px; 
} 
.wizardbar li 
{ 
    display:table-cell; 
    width: 116px; 
    text-align: center; 
    padding-top: 36px; 
} 
.step1 
{ 
    background: url('Step1.gif') no-repeat; 
} 
.step2 
{ 
    background: url('Step2.gif') no-repeat; 
} 
.step3 
{ 
    background: url('Step3.gif') no-repeat; 
} 

... 나는

<div> 
    <ul class="wizardBar"> 
     <li class="step1">Step One</div> 
     <li class="step2">Step Two</div> 
     <li class="step3">Step Three</div> 
    </ul> 
</div> 

단계의 세트 같은 마법사의 이름을 선언하는 세트리스트를 가지고 ... 그리고 나는 포맷 내 CSS 파일에 다음 한 내가 여기서 성취하려고하는 것은 ...

스텝 1.gif ..... 스텝 2.gif ..... 스텝 3.gif
. 스텝 1 ........ 스텝 2 ........ 3 단계

Whe 단계 이름을 다시 입력하십시오. 즉, 해당 단계의 이미지 아래에 "STEP 1"이 나타납니다. 현재 텍스트는 이미지의 꼭대기에 있습니다. 나는 어떤 겹침도 원하지 않는다.

감사합니다, 저스틴

Answer 1

은 CSS 파일이 추가 :

.div.wizardBar li { 
padding-top: 50px; 
} 

바이올린을 패딩 정상에 당신이 필요로하는 정확한 거리를 얻을 때까지.

Answer 2

당신은, 본질적으로 주문 구조를 진행성을 자세히 설명하고 감안할 때, 나는 강력하게 ul 대신에 ol를 사용하는 것이 좋습니다 것입니다. 그게 내가 원하는대로 다음은하지 깨끗하게 불구하고, 당신의 목표를 달성해야했다 :

li { 
    padding-top: 30px; /* equal to or greater than the background-image's height */ 
} 

당신이 필요한 경우, 특이도를 증가 선택 메뉴 형식으로 li를 앞에 덧붙이.

Answer 3

나는 background-position CSS 속성에 모양을 줄 것이다. 아마도 요소 크기를 조정하는 것과 관련 될 것이다.

http://www.w3schools.com/css/pr_background-position.asp