我如何才能使字體很棒，可以占用其父容器的整個區域

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的問題 。