Лайтбокс taglines или заголовки

Question

Я пытаюсь иметь заголовок или тег под каждой фотографией лайтбокса, но второй, что я делаю, делает все изображения вертикальными, а не горизонтальными в одну строку или разборными в разных браузерах. Я добавлю коды, потому что сценарий java слишком длинный для фрагментов здесь. Первый показывает, как я хочу, чтобы лайтбокс функционировал (у которого нет тегов), а затем у второго есть тег, который я хочу, но укладывается неправильно. Если кто-то может помочь мне разобраться в этой проблеме, это будет очень полезно! Спасибо!

Первый Codepen: http://codepen.io/anon/pen/XpLjOp

<div id="recentwork"> 
<h2 id="recent"> Most Recent Work</h2> 


<a href="https://upload.wikimedia.org/wikipedia/en/f/f2 /Seesmic_Logo.png" data-lightbox="website" data-title=""> 
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px"> 
    </a> 

Второй Codepen: http://codepen.io/anon/pen/dNBpQm

<div id="recentwork"> 
<h2 id="recent"> Most Recent Work</h2> 


<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title=""> 
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px"> 
    </a> 
    <h3> Title</h3> 


    <a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title=""> 
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px"> 
    </a> 
    <h3> Title</h3> 

<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title=""> 
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px"> 
     </a> 
     <h3> Title</h3> 

    <a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title=""> 
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px"> 
     </a> 
     <h3> Title</h3> 


    </div> 

Answer 1

Вы могли бы включать h3 внутри a, а затем пользователь может нажать на либо по ссылке.

<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title=""> 
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px"> 
    <h3> Title</h3> 
</a> 

Чтобы выровнять изображение по горизонтали с помощью:

#recentwork a { 
    display: inline-block; 
} 

codepen