自定义高度的圆形按钮中间的Bootstrap图标

Question

这是我的代码：

＆＃13;

＆＃13;

boolean

＆＃13;

＆＃13;

＆＃13;

我想要一个带有加号的圆形按钮。但问题是加号并没有在按钮中间对齐。有什么解决方案吗？我必须保持高度（30px），因为按钮实际上将与其他元素一起放在表格行中。像这样：

这里加号不会出现在中间。我需要一个解决这个问题的方法。

JSFiddle：https://jsfiddle.net/x1yvhhc2/

Answer 1

将absolute位置应用于span并将其居中。

＆＃13;

＆＃13;

.btn {
  position: relative;
}

.btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info" style="border-radius:50%;margin-left:10px;
margin-top:2px;margin-bottom:2px;height:30px;width:30px;">
      <span class="glyphicon glyphicon-plus"> </span>
  </button>
<div class="container"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过flexbox实现此目的：

＆＃13;

＆＃13;

.some-button {
  border-radius: 50% !important;
  margin-left:10px;
  margin-top: 2px;
  margin-bottom: 2px;
  height: 30px;
  width: 30px;
  position: relative;
}

.flex-center-wrapper {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info some-button">
  <div class="flex-center-wrapper">
    <span class="glyphicon glyphicon-plus"></span>
  </div>
</button>

＆＃13;

＆＃13;

＆＃13;