テキストとスピナーが垂直中央整列

Question

私は私がページ上に並ぶように見えることはできませんappthatリアクトでスピナーとテキストを持っています。私は両方のdiv要素でverticalAlign: 'middle'を試しましたが、これは動作しません - どのように垂直に両方のdivを整列できますか？

<div 
style={{ 
top: '50%', 
width: '50%', 
position: 'absolute', 
textAlign: 'center', 
opacity: opacity, 
color: "#fff", 
zIndex: 100000000, 
fontFamily: 'Verdana, Geneva, sans-serif', 
fontSize: "36px", 
verticalAlign: 'middle', 
display: this.state.loaded ? 'none' : '' 
}}>Lorem Ipsum</div> 
<div style={{opacity: opacity, 
    position: 'fixed', 
    zIndex: 2147483647, 
    top: '0', 
    left: '0', 
    bottom: '0', 
    right: '0', 
    height: '2em', 
    width: '2em', 
    margin: 'auto' 
    }} className="spinner"> 
    <div className="double-bounce1"></div> 
    <div className="double-bounce2"></div> 
</div> 

CSS：

<style> 
     body {margin: 0; padding: 0; overflow: hidden;} 
     .spinner { 
    width: 40px; 
    height: 40px; 

    position: relative; 
    margin: 100px auto; 
} 

.double-bounce1, .double-bounce2 { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background-color: #333; 
    opacity: 0.75; 
    position: absolute; 
    top: 0; 
    left: 0; 

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out; 
    animation: sk-bounce 2.0s infinite ease-in-out; 
} 

.double-bounce2 { 
    -webkit-animation-delay: -1.0s; 
    animation-delay: -1.0s; 
} 

@-webkit-keyframes sk-bounce { 
    0%, 100% { -webkit-transform: scale(0.0) } 
    50% { -webkit-transform: scale(1.0) } 
} 

@keyframes sk-bounce { 
    0%, 100% { 
    transform: scale(0.0); 
    -webkit-transform: scale(0.0); 
    } 50% { 
    transform: scale(1.0); 
    -webkit-transform: scale(1.0); 
    } 
} 
    </style> 

Answer 1

使用display:inline-block両方div要素をインライン化してvertical-align:middleプロパティを使用してそれらを整列します。

jsfiddleに実際のサンプルを投稿できる場合は、より詳細な回答をすることができます。