html - 为什么我的 FontAwesome 内容作为背景出现在中心之外？

Question

我正在尝试将 FontAwesome 图标设置为文章列表的“默认缩略图”。我的问题是图标在我的 div 中水平显示偏离中心。查看jsFiddle .

<div class="card-row-image fa fa-cutlery thumbnail-default">
   <div class="card-row-label"><a href="http://mahanap.dev/index.php/categories/restaurants">Restaurants</a>
   </div>
   <div class="card-row-price">Pennsylvania</div>
</div>

.thumbnail-default {
  position: relative;
  text-align: center;
  border: 1px solid #547b97;
  background: #e4e4e4;
}
.thumbnail-default:before {
    position:absolute;
    font-family: 'FontAwesome';
    font-size: 72px;
    color: #547b97;
    text-align: center;
    padding: 0px;
    margin: 0px;
    top: 50%;
    transform: translateY(-50%);
}
.card-row-price {
  background-color: #009f8b;
  bottom: 0px;
  color: #fff;
  font-size: 13px;
  left: 50%;
  padding: 3px 15px;
  position: absolute;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2; 
}
.card-row-label {
  background-color: #c6af5c;
  color: #fff;
  left: 50%;
  font-size: 13px;
  padding: 3px 15px;
  position: absolute;
  top: 0px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 2; 
}
.card-row-image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  position: relative;
  width: 262px; }

这是我当前的输出:

有什么想法吗？感谢您的宝贵时间!

Answer 1

设置这些CSS代码使其居中。发生这种情况是因为在绝对定位的伪元素上，如果你没有指定水平位置(你没有设置 left 或 right 属性)，它将跟随文本流并且将遵守在父级上设置的 text-align: center。

.thumbnail-default:before { left: 50%; transform: translate(-50%, -50%); }

Working Fiddle