我如何才能使字体很棒，可以占用其父容器的整个区域

Question

如您所见，大拇指位于其父区域上方。 UI布局不可接受。

以下是预期的结果。 我试图将负数放在底边，或者尝试使它们处于FLEX布局中。 它们都不起作用。 有任何想法吗？

父容器

#vote-buttons-section .iconic-button#upvote {
  background: #7f7f7f !important;
  width: 75px;
  height: 55px; }
#vote-buttons-section .iconic-button#downvote {
  background: #7f7f7f;
  height: 55px;
  width: 75px; }

字体真棒图标出现在BEFORE属性上

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-focus:before {
  font-family: FontAwesome;
  content: "\f087";
  font-size: 55px;
  color: white;
  vertical-align: middle;
  line-height: 55px;
  }

.ui-button.iconic-button.iconic-button-downvote:before,
.ui-button.iconic-button.iconic-button-downvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-downvote.ui-state-focus:before {
  font-family: FontAwesome;
  content: "\f088";
  font-size: 64px;
  color: white;
  vertical-align: middle; }

Answer 1

好像容器的高度是55px 。 您可以做的是添加规则line-height: 55px; 到处理图标的部分。 似乎您应该将其添加到选择器中

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-focus:before

然后，它应该居中。 您可以根据需要调整font-size ，只要line-height正确，它就会居中。

Answer 2

我要做的就是增加height: inherit; 和一些这样的padding ：

#vote-buttons-section .iconic-button#upvote {
   height: inherit;
   padding: 10px 10px;
}

如果不起作用，请在CSS属性中添加!important ，如下所示：

#vote-buttons-section .iconic-button#upvote {
   height: inherit !important;
   padding: 10px 10px !important;
}

希望这可以帮助。

编辑：我没有看到您通过在我之前给出答案的用户解决了问题。 很高兴您解决了用户GustafGunér的问题 。