У меня есть уменьшенное изображение, которое я построил с помощью начальной загрузки 3 (для начальной загрузки в метро, чтобы указать c - https://talkslab.github.io/metro-bootstrap/components.html)
Все работает, как и ожидалось, но проблема У меня есть делает подпись под миниатюрой, то есть div с текстом. Я хочу, чтобы заголовок был исправлен под миниатюрой, даже если размер окна изменен. Вот что я попробовал:
<div class="col-sm-4 col-md-3">
<div class="thumbnail tile tile-medium tile-purple col-md-3">
<a href="#" class="fa-links">
<div class='gun-icon-container'>
<img src = "img/handcuffs.png" alt="BJIA-image" class="gun-icon" style='vertical-align:center;width:80px;'>
</div>
</a>
</div>
<div class ="caption" style='text-align:left;margin-top: 60%;'>
This is my caption
</div>
</div>
Есть две проблемы. 1) даже используя text-align, я не могу заставить текст перестать плавать вправо. 2) при изменении размера окна заголовок плавает над миниатюрой, а не остается под ней.
Фотографии того, как в настоящее время выглядит миниатюра: 
Заранее спасибо.