如何将我的跨度垂直放置在覆盖格中？

问题描述：

我正在使用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>;

从我的经验，垂直对齐似乎只与'显示的工作：表cell' –

我建议检查我的答案在这个问题：http://*.com/questions/41721586/how-do-i-responsively-center-text-inside-of-a-div/41721874#41721874？可以帮助... –

答

您可以使用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>;

答

您可以使用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>

如何将我的跨度垂直放置在覆盖格中？

相关推荐