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

Question

这是我的代码：

<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>

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

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

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

Answer 1

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

.btn {
  position: relative;
}

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

<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>