CODEWITHSUNDEEP
htmlcssreactjs
iskandarblue
iskandarblue

Reputation: 7526

Aligning text and spinner vertically center

enter image description here

I have a spinner and text in my React appthat I can't seem to line up on the page. I have tried verticalAlign: 'middle' in both div elements but this does not work - how can I vertically align both divs to be flush in the center? 

  <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>

Upvotes: 1

Views: 2079

Answers (1)

Chathuri Buddika
Chathuri Buddika

Reputation: 313

Use display:inline-block to inline both div elements and align them using vertical-align:middle property.

If you can post a working example in jsfiddle, I can give you more detailed answer.

Upvotes: 5

Related Questions