浮动按钮内的居中图标

Question

如何让这个图标在浮动按钮中居中？

我试过了

display:inline-block;
text-align: center;
vertical-align: middle;

但是这些并没有解决问题。

.float {
  position: fixed;
  width: 56px;
  height: 56px;
  bottom: 24px;
  right: 16px;
  background-color: blue;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  z-index: 1;
}

.my-float {
  font-size: 24px;
  z-index: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

<a href="#" class="float">
  <i class="fa fa-plus my-float"></i>
</a>

Answer 1

尝试将以下规则添加到您的 float_add 或 float_edit 按钮

display: flex;
justify-content: center;
align-items: center;

浮动按钮内的居中图标

Centering icon inside float button

css

font-awesome