html - 我怎样才能让 font-awesome 可以占据其父容器的整个区域

Question

如您所见，拇指位于其父区域上方。UI 布局 Not Acceptable 。

以下是预期结果。我试图将 margin-bottom 设置为负数，或者尝试以 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正确，它就会居中。