将文本和微调器垂直对齐

Question

我的React应用程序中有一个微调器和文本，我似乎无法在页面上排队。我在两个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中发布一个有效的例子，我可以给你更详细的答案。