为什么我的FontAwesome内容偏离中心作为背景？

Question

我正在尝试将FontAwesome图标设置为文章列表的“defualt缩略图”。我的问题是图标在我的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属性），它将遵循文本流并遵守{{1在父级上设置。

text-align: center

Working Fiddle