Ввод текста под изображениями в виде списка (с JQuery лайтбоксе)

Question

Прямо сейчас у меня есть большой список изображений для использования с плагином JQuery Lightbox, просто отформатированный как:

<div id="gallery"><ul> 
    <li><a href="photos/1.jpg"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a></li> 
    <li><a href="photos/2.jpg"><img src="photos/2_t.jpg" width="72" height="72" alt="" /></a></li> 
    <li><a href="photos/3.jpg"><img src="photos/3_t.jpg" width="72" height="72" alt="" /></a></li> 
    <li><a href="photos/4.jpg"><img src="photos/4_t.jpg" width="72" height="72" alt="" /></a></li> 
    <li><a href="photos/5.jpg"><img src="photos/5_t.jpg" width="72" height="72" alt="" /></a></li> 
</ul></div> 

CSS:

#gallery { 
    background-color: #efefef; 
    border:1px solid #ccc; 
    background-size: 100%; 
    width: 90%; 
    margin-top:20px; 
} 

#gallery ul { list-style: none; } 
#gallery ul li { 
    display: inline; margin-left: 5px; margin-right: 5px; 
    font-size:.4em; 

} 
#gallery ul img { 
    border: 5px solid #3e3e3e; 
    border-width: 2px 2px 2px; 
} 
#gallery ul a:hover img { 
    border: 5px solid #fff; 
    border-width: 2px 2px 2px; 
    border-color: #8f8f8f; 
    color: #fff; 
} 
#gallery ul a:hover { color: #fff; } 

И что я пытаюсь сделать, так это текст подписи под каждым изображением. Пример:

<li><a href="photos/1.jpg"> 
     <img src="photos/1_t.jpg" width="72" height="72" alt="" /></a> 
     Image 1 
    </li> 

Но сейчас я просто получаю надпись, расположенную справа от изображения. Я не могу придумать, как лучше это делать. Любая помощь приветствуется.

Answer 1

I дополнение к <br> после изображения для заголовка, используйте display: inline-block для элементов <li>, а не только display: inline.

http://jsfiddle.net/nfEMs/1/

Answer 2

Try;

HTML:

<li><a href="photos/1.jpg"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a><p>Image 1</p></li> 

CSS:

#gallery ul li { 
    float:left; margin-left: 5px; margin-right: 5px; 
    font-size:.4em; 

}