如何在叠加 div 中垂直居中我的跨度? [英] How do I center my span vertically in my overlay div?

查看：30
本文介绍了如何在叠加 div 中垂直居中我的跨度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

在下面的代码中，textAlign 有效，但 verticalAlign 无效.

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

let loadingOverlay = <div style={{位置:'绝对'，不透明度:0.7，宽度: '100%',高度:'100%',白颜色'，backgroundColor: 'DarkGrey',zIndex: 1,边框:0，填充:0，边距:0，文本对齐:'居中'，垂直对齐:'中间'，}}><跨度className="glyphicon glyphicon-refresh"风格={{字体大小:50，动画:'旋转 1 秒无限线性'}}/>

;let detailPanel = <div className="well" style={{margin: 2, padding: 5}}><div style={{position: 'relative'}}>{工作状态&&加载覆盖}{详细表格}

...

;

解决方案

你可以使用 flexbox 来解决这个问题

let loadingOverlay = <div style={{位置:'绝对'，不透明度:0.7，宽度: '100%',高度:'100%',白颜色'，backgroundColor: 'DarkGrey',zIndex: 1,边框:0，填充:0，边距:0，文本对齐:'居中'，垂直对齐:'中间'，显示:弹性；对齐项目:居中；对齐内容:居中；}}><跨度className="glyphicon glyphicon-refresh"风格={{字体大小:50，动画:'旋转 1 秒无限线性'}}/>

;let detailPanel = <div className="well" style={{margin: 2, padding: 5}}><div style={{position: 'relative'}}>{工作状态&&加载覆盖}{详细表格}

...

;

I'm using Typescript, React.js and Bootstrap 3.

I've got an overlay div that I position over the top of my detail content while I'm loading data from the server.

In the overlay, I've got an animated spinner, implemented as a span/glyphicon.

In the following code, the textAlign works, but the verticalAlign doesn't.

Can anyone tell what's wrong with this - what do I need to do to make the spinner be centered vertically as well as horizontally?

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

解决方案

You can use flexbox for this

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

这篇关于如何在叠加 div 中垂直居中我的跨度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆