Question

试图通过图标显示来获得叠加效果。

在灰色空间中将图标/文本置于绝对居中之后。并且不显示隐藏类 - 或删除显示此繁忙叠加层的类。

尝试保证金：0自动和保证金：自动运气不大。使用宽度：100％和不同组合中的高度有不同的效果

这是基础设置

table {
  width:100px;
  height: 100px;
}

.busy-indicator {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.33);
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class='container'>
  <div class="row">
    <div class="col-xs-12">
      <p>
        some other stuff not busy
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-10">
      <div>
        <table class='busy'>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
        </table>

        <div class="busy-indicator">
          <i class="fa fa-spin fa-refresh"></i>
        </div>

      </div>
    </div>
  </div>



  <div class="row">
    <div class="col-xs-12">
      <p>
        some other stuff not busy
      </p>
    </div>
  </div>
</div>

最初的开始是，如果可以在表上完成某些事情，而不是像使用::之前在表之后添加一个元素 - 但我认为无法在前/后内容上执行html问题？

表的灵活宽度高度，如果在任何元素上工作会很好但div / table就足够了。

我尝试使用示例;

Center content in a absolute positioned div

使用display：table（切换i fa图标以显示文本以显示）

https://jsfiddle.net/39L7tqbr/

结果是 - 忙碌指标损失背景颜色和内容仍然没有垂直居中

某些班级缺失，或者我的复杂程度超过了需要????

Answer 1

要实现这一点，并在中心设置图标，我们需要将<i> tage包含在另一个元素<div>中，例如，因为如果我们尝试直接居中<i>我们会与font-awsome动画产生某种冲突，所以我们只需要将<i>标签包含在div中：

<强> HTML：

<div class="busy-indicator">
  <div>
      <i class="fa fa-spin fa-refresh"></i>
  </div>
</div>

<强> CSS：

.busy-indicator > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这会将图标置于 busy-indicator div

中心

如何绝对地将重叠的Font Awesome图标居中？

1 个答案: