如何在我的叠加 div 中垂直居中我的跨度？

Posted 2023-03-13

【中文标题】如何在我的叠加 div 中垂直居中我的跨度？

【英文标题】：How do I center my span vertically in my overlay div?

【发布时间】：2017-10-07 09:11:58

【问题描述】：

我正在使用 Typescript、React.js 和 Bootstrap 3。

我有一个覆盖 div，当我从服务器加载数据时，我将其放置在详细内容的顶部。

在叠加层中，我有一个动画微调器，实现为 span/glyphicon。

在以下代码中，textAlign 有效，但 verticalAlign 无效。

谁能告诉我这有什么问题 - 我需要做什么才能使微调器垂直和水平居中？

let loadingOverlay = <div style=
  position: 'absolute',
  opacity: 0.7,
  width: '100%',
  height: '100%',
  color: 'white',
  backgroundColor: 'DarkGrey',
  zIndex: 1,
  border: 0, padding: 0, margin: 0,
  textAlign: 'center',
  verticalAlign: 'middle',

>
  <span 
    className="glyphicon glyphicon-refresh"
    style=
      fontSize: 50,
      animation: 'spin 1s infinite linear'
    
  />
</div>;

let detailPanel = <div className="well" style=margin: 2, padding: 5>
  <div style=position: 'relative'>
    workingStatus && loadingOverlay
    detailForm
  </div>
  ...
</div>;

【问题讨论】：

根据我的经验，垂直对齐似乎只适用于display: table-cell

我可以建议在这个问题中检查我的答案：***.com/questions/41721586/…？愿它有帮助...

【参考方案1】：

您可以使用top: 50% 和transform: translateY(-50%) 使图标垂直居中。像这样：

let loadingOverlay = <div style=
  position: 'absolute',
  opacity: 0.7,
  width: '100%',
  height: '100%',
  color: 'white',
  backgroundColor: 'DarkGrey',
  zIndex: 1,
  border: 0, padding: 0, margin: 0,
  textAlign: 'center',

>
  <span 
    className="glyphicon glyphicon-refresh"
    style=
      fontSize: 50,
      animation: 'spin 1s infinite linear',
      top: '50%',
      transform: 'translateY(-50%)'
    
  />
</div>;

let detailPanel = <div className="well" style=margin: 2, padding: 5>
  <div style=position: 'relative'>
    workingStatus && loadingOverlay
    detailForm
  </div>
  ...
</div>;

---

您可以在下面看到一个有效的 html 演示。我删除了内联样式并添加了 id 以提高可读性：

#outer 
  position: relative;
  height: 200px;  /*added for demo*/


#inner 
  position: absolute;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  color: white;
  background-color: DarkGrey;
  z-index: 1;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: center;


#inner span 
  font-size: 50;
  animation: spin 1s infinite linear;
  top:50%;
  transform: translateY(-50%);

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="outer">
  <div id="inner">
    <span class="glyphicon glyphicon-refresh"></span>
  </div>
</div>

【参考方案2】：

您可以为此使用flexbox

let loadingOverlay = <div style=
  position: 'absolute',
  opacity: 0.7,
  width: '100%',
  height: '100%',
  color: 'white',
  backgroundColor: 'DarkGrey',
  zIndex: 1,
  border: 0, padding: 0, margin: 0,
  textAlign: 'center',
  verticalAlign: 'middle',
  display:flex;
  align-items: center;
  justify-content: center;

>
  <span 
    className="glyphicon glyphicon-refresh"
    style=
      fontSize: 50,
      animation: 'spin 1s infinite linear'
    
  />
</div>;

let detailPanel = <div className="well" style=margin: 2, padding: 5>
  <div style=position: 'relative'>
    workingStatus && loadingOverlay
    detailForm
  </div>
  ...
</div>;