Bootstrap 3 方形瓷砖显示答案

【问题标题】：Bootstrap 3 square tile displayBootstrap 3 方形瓷砖显示
【发布时间】：2014-02-14 14:56:38
【问题描述】：

使用 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>

我只想将 img 占位符替换为（垂直对齐的）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 ？

【问题讨论】：

stackoverflow.com/questions/19504755/…的可能重复
我可能错了，但这似乎不是重复的。 bootply 示例没有方形瓷砖。
问题是一样的：“如何创建响应式的方形 .thumbnail div”

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您希望它们始终保持方形，您可以在 thumbnail 之前使用具有 100% 边距的 dummy 占位符，然后绝对定位 thumbnail...

CSS：

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

http://bootply.com/108128

【讨论】：

酷！这让我得到了广场。最后一件事：我如何垂直居中该文本？我试过这样的东西 (stackoverflow.com/questions/9249359/…) 但没有用。
点击 Bootply 链接。他使用了 36% 的顶部填充将文本放到了大约中间
或者，我刚刚用padding-top:calc(50% - 30px); 再次更新了它，这似乎更准确，但可能不适合跨浏览器。