Bootstrap 3 正方形瓷砖展示

Question

使用Bootstrap 3，我想要一个看起来像Bootstrap缩略图（http://getbootstrap.com/components/#thumbnails）的正方形平铺菜单。在那里得到平铺显示的代码是：

<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail">
    <img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
  </a>
</div>

我只想将图像占位符替换为（垂直对齐的）HTML文本。因此，我认为可以按照以下步骤进行：

<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">Homepage</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">View Profile</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">Something 2 lines</a>
</div>

这就是我得到的：

占位符示例中每个瓷砖动态形状保持为正方形，我希望我的html/css/js也能这样。是否可能，还是我必须在那里使用img？

- Alex

---

可能是 https://dev59.com/KHjZa4cB1Zd3GeqPbTvc 的重复问题。 - BlueCacti

我可能错了，但那似乎不是重复的。Bootply的示例没有正方形的瓷砖。 - Alex

问题是一样的：“如何创建响应式、正方形的缩略图div” - BlueCacti

Answer 1

如果您希望它们始终保持正方形，您可以在缩略图之前使用带有100％边距的“虚拟”占位符，然后对缩略图进行绝对定位...

CSS：

.dummy {
    margin-top: 100%;
}
.thumbnail {
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 15px;
    right: 0;
}

http://bootply.com/108128

- Zim

---

太棒了！这让我得到了正方形。最后一个问题：如何垂直居中文本？我尝试了像这样的东西（https://dev59.com/zWox5IYBdhLWcg3wWzN7?lq=1），但不起作用。 - Alex

点击Bootply链接。他使用了36％的顶部填充来将文本下移至大约中间位置。 - BlueCacti

我刚刚再次更新了它，使用padding-top:calc(50% - 30px);，看起来更准确，但可能不适用于所有浏览器。 - Carol Skelly