如何使按钮内的字体真棒图标居中？

Question

我正在尝试创建一个带有 X（font-awesome's <i class="fa fa-close"></i>）的小按钮。我试图让它看起来像这样：

但是，我在使 X 在按钮内居中时遇到了一些问题。

这是标记：

<button class="cart-remove">
  <i class="fa fa-close"></i>
</button>

和CSS：

.cart-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center !important;
}

不幸的是，字体很棒的关闭图标没有居中，它出现在右下角。我怎样才能解决这个问题？我认为 text-align center 将该元素内的内容居中？

谢谢

Answer 1

您可以尝试将 Flexbox 应用于 i 元素使其居中

$('.cart-remove').click(function() {
	var currentCount = $(this).attr('increaseorator');
  var currentCountParsed = parseInt(currentCount);
  var currentWH = currentCountParsed + 20;
  $(this).css({
  	'width' : currentWH,
    'height' : currentWH
  });
  $(this).attr('increaseorator', currentWH);  
});

.cart-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #CCC;
    border-radius: 50%;
    color: black;
}
.cart-remove i {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ignore, styling */
* { outline: 0; }
*::-moz-focus-inner { border: 0; }

.cart-remove {
  border: 1px solid hsla(0, 0%, 0%, 0.5);
  background-color: hsla(0, 0%, 70%, 1);
}
.cart-remove:hover {
  background-color: red; 
}
instructions {
  position: absolute;
  width: 100%;
  left: 50%;  transform: translateX(-50%);
  bottom: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="cart-remove" style="width: 20px; height: 20px;" increaseorator="20">
  <i class="fa fa-close"></i>
</button>

<instructions>click the x to enlarge, it should remain centered</instructions>

小提琴

https://jsfiddle.net/Hastig/esuxa4b6/2/