如何使字体真棒可以占用其父容器的整个区域

Question

正如您所见，拇指在其父区域上方。 UI布局是不可接受的。

以下是预期结果。 我试图将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正确，它就会居中。

Answer 2

我会做的是添加CancelToken和一些height: inherit;，如下所示：

padding

如果不起作用，请将#vote-buttons-section .iconic-button#upvote { height: inherit; padding: 10px 10px; } 添加到CSS属性中，如下所示：

!important

希望这有帮助。

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