如何將我的跨度垂直放置在覆蓋格中？

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

來源

2017-05-09 Shorn

從我的經驗，垂直對齊似乎只與'顯示的工作：表cell' –

我建議檢查我的答案在這個問題：http://stackoverflow.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>;

來源

2017-05-09 07:11:58

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

來源

2017-05-09 07:19:42 Chris

如何將我的跨度垂直放置在覆蓋格中？

回答

相關問題