이미지 위에 텍스트를 놓기

Question

3x3 이미지 격자가 있습니다. 내가 할 수 있기를 원하는 것은 텍스트를 각 이미지 위에 올려 놓는 것이지만 어떻게해야 할지를 파악할 수없는 것입니다.

내 CSS

body{background-color:black;} 

ul#grid { 
    list-style: none; 
    width: 1180px; 
    margin:0 auto; 
    overflow:hidden; 
    } 

#grid li { 
    float: left; 
    margin: 0 10px 70px 0px; 
    display:inline; 
    position:relative; 
    } 

#grid li img { 
    padding: 15px; margin: 0; 
    width: 339px; 
    height: 211px; 
    position:relative; 
    } 

html로

<div class="portfolio"> 
    <ul id="grid"> 
    <li><a href="#"><img src="1.jpg"></a></li> 
    <li><a href="#"><img src="2.jpg"></a></li> 
    <li><a href="#"><img src="3.jpg"></a></li> 
    <li><a href="#"><img src="4.jpg"></a></li> 
    <li><a href="#"><img src="5.jpg"></a></li> 
    <li><a href="#"><img src="6.jpg"></a></li> 
    <li><a href="#"><img src="7.jpg"></a></li> 
    <li><a href="#"><img src="8.jpg"></a></li> 
    <li><a href="#"><img src="9.jpg"></a></li> 
    </ul></div> 

jsfiddle

Answer 1

나는 당신이 의미 생각 : http://jsfiddle.net/feitla/dWuCH/3/

(편집 바이올린 : 일부 재미 :)

했다

#grid li span { 
    display:block; 
    bottom:200px; 
    position:relative; 
    width:370px; 
    margin-left:20px; 
} 

<div class="portfolio"> 
    <ul id="grid"> 
     <li><a href="#"><img src="1.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="2.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="3.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="4.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="5.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="6.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="7.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="8.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
     <li><a href="#"><img src="9.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a> 
     </li> 
    </ul> 
</div>