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;

浮动按钮内的居中图标

1 个答案: