Html 在引导中的缩略图下方添加标题时遇到问题

我有一个使用引导3（具体来说是metro引导）构建的缩略图

所有的工作都和预期的一样，但是我遇到的问题是在缩略图下制作一个标题，即一个带有文本的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） 即使使用文本对齐，我也无法使文本停止向右浮动。2） 调整窗口大小时，标题浮动在缩略图上方，而不是停留在缩略图下方

缩略图当前外观的照片：

提前谢谢