Responsive Rotate Words CSS

Question

I am trying to make my rotate words responsive and centered on the page. This is code from GitHub and works with just HTML and CSS. When the browser is 100% the output is not centered on the page, it's off tho the right just a bit. When the browser is narrowed, the span words do not line up correctly. Any help is greatly appreciated! -Chad

h1{
	color: #000;
	font-size: 44px;
	margin-top: 40px;
	text-align: center;
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Pop Effect*/
.popEffect{
	display: inline;
	text-indent: 8px;
}
.popEffect span{
	animation: pop 12.5s linear infinite 0s;
	-ms-animation: pop 12.5s linear infinite 0s;
	-webkit-animation: pop 12.5s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.popEffect span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.popEffect span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.popEffect span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.popEffect span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}
/*Pop Effect Animation*/
@-moz-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}
@-webkit-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

  <h1>Pop Effect looks very
    <div class="popEffect">
      <span>Handsome.</span>
      <span>Clean.</span>
      <span>Elegant.</span>
      <span>Magnificent.</span>
      <span>Adorable.</span>
    </div>
  </h1>

Answer 1

"When the browser is 100% the output is not centered on the page, it's off tho the right just a bit."

So let's first understand what actually cause your problem:

the spans in your html are positioned as "absolute", and object that are positioned as absolute are treated like they never existed (other objects can't interact with it). so when you tried to use text-align: center; to center the h1 and <div class="popEffect">, only the h1 get centered and then the <div class="popEffect"> tries to align with the already centered h1

(as shown in the image below)

And here is my solution for this problem:

first of all, encase all the things(h1,<div class="popEffect">) in a div

  <div class="stuff">  <!-- The new element -->
    <h1>Pop Effect looks very

      <div class="popEffect">
        <span>Handsome.</span>
        <span>Clean.</span>
        <span>Elegant.</span>
        <span>Magnificent.</span>
        <span>Adorable.</span>
      </div>

    </h1>
  </div>  <!-- The new element -->

Then add the following css to the existing one

.stuff{

  /*the width of the "<h1>" + "<div class="popEffect">"*/
  width: 600px 

  /*the css below will center almost any html object*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

}
h1{
    white-space: nowrap;
}

what are we doing is wrapping all the thing in one div and centering that div. and because the width of the Poping text is always changing, you will want to automatically calculate the needed width of the div, use the jQuery code bellow

it gets the width of the widest Poping text and then adjust the whole thing to that.

$(document).ready(function(){var spans = $(".popEffect span"); //get all the "span" inside "popEffect"
var spansWidth = [];

spans.each(function(){
    spansWidth.splice(0,0,$(this).width());
});
//
  var largest = Math.max.apply(Math, spansWidth);//get the largest number
  $(".stuff").width($("h1").width() + largest);
});

If you don't understand my explanation( cause i'm bad at explaining :p ), here is a fiddle: https://jsfiddle.net/Bintang/6htwazzo/