Aligning Text und Spinner vertikal Zentrum

Question

Ich habe einen Spinner und Text in meinem React appthat kann ich nicht auf der Seite zu aufreihen scheinen. Ich habe verticalAlign: 'middle' in beiden div-Elementen versucht, aber das funktioniert nicht - wie kann ich beide Divs vertikal ausrichten, um in der Mitte bündig zu sein?

<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

Verwenden display:inline-block Inline beide div Elemente und richten sie vertical-align:middle Eigenschaft.

Wenn Sie ein funktionierendes Beispiel in jsfiddle veröffentlichen können, kann ich Ihnen ausführlichere Antwort geben.