Centering Scrolling Text - html

Question

I have the following HTML:
<div id="square" class="zoomInUp animated"> <p class="header-name">Theo Bearman</p>
<p class="header-title">Interests in <span class="rw-words rw-words-1">
<span>Web Designer</span>
<span>Web Developer</span>
<span>Graphic Designer</span>
</span></p></div>
And the following CSS:
/* Animated words ------------------------------------------------- */
.rw-words{
text-indent: 10px;
font-size: 16px;
font-weight: 100;
text-align: center
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
-webkit-animation: rotateWord 9s linear infinite 0s;
-ms-animation: rotateWord 9s linear infinite 0s;
animation: rotateWord 9s linear infinite 0s;
text-align: center
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
25% { opacity: 1; -webkit-transform: translateY(0px); }
40% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
25% { opacity: 1; -ms-transform: translateY(0px); }
40% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
25% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
40% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
#media screen and (max-width: 320px){
.rw-sentence { font-size: 9px; }
}
.header-name2 {
background-color: #000;
padding: 5px 17px;
display: inline-block;
color: #fff;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-left: 3px solid #f00;
border-right: 3px solid #0045ff;
}
.header-title {
font-size: 16px;
font-weight: 100;
}
What would I need to do to change my code so that header-title is centered underneath header-name2 with the scrolling words included?
A live example is here. You can see that the text "Interests in" is centered but the scrolling words are not.
Thanks in advance!

Answer 1

You can do this:
.rw-words{
....
display: block;
position: relative;
}
.rw-words-1 span{
left:25%;
right: 25%;
}
and remove text-indent from .rw-words

Answer 2

You could give .header-title { margin-left: -110px; }

Answer 3

<div class="rw-words rw-words-1">
<div id = 'cont'></div>
<div>Web Designer</div>
<div>Web Developer</div>
<div>Graphic Designer</div>
</div>
Put a blank container div in there
#cont {
position:relative;
width: 10em;
}
Problem is absolute position is not taking up any "space"
and therefore not computed in centering.