text-align: center not working on dynamic inline-block tag

Question

I have a angular directive that scrolls through words in an array and displays them in a fashion that makes it look as though someone is typing (like so: enter link description here). I am having an issue getting the h1 tag that contains the dynamically changing font to text-align: center. It just isn't working.

Here is my HTML...

<div class='intro-div'>
    <h1 class='intro-title'>Hi, I'm Erik. I build & design</h1>
    <div class='changing-text-space-holder'>
        <h1 i-do class='intro-title changing-text'></h1>
    </div>
    <button class='hire-me-btn'>AVAILABLE FOR HIRE</button>
</div>

Here is my CSS...

.intro-div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 55em;
}

.intro-title{
    font-family: 'WSReg';
    color: white;
    font-size: 3.5em;
    text-align: center;
}

.changing-text-space-holder{
    height: 3em;
    width: 100%;
}

.changing-text{
    border-right:  lightgrey solid;
    display: inline-block;
    text-align: center;
}

.hire-me-btn{
    border: solid white .2em;
    border-radius: 75px;
    width: 80%;
    height: 2.5em;
    background-color: transparent;
    font-size: 3em;
    font-family: 'WSReg';
    color: white;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Here is my directive

myModule.directive('iDo', function(){
    return function(scope){
        var element = angular.element('.changing-text');
        var words = ['front-end.', 'back-end.', 'anywhere between the "ends".', 'e-commerce websites.', 'landing-pages.', 'with Javascript.', 'with Python.', 'the internet.']
        var startStopBool = false;
        var word_count = 0;
        var letter_count = 0;

        function updateText(){
            if(words[word_count] === undefined){ //if no more words in array stop
                clearInterval(frontDisplay);
            }else if(element[0].innerHTML.length === words[word_count].length){  //switch to next word
                word_count++;
                letter_count = 0;
                clearInterval(frontDisplay);
                setTimeout(function(){restartInterval()}, 2000); //wait 1 second and then restart the text
            }else{
                element[0].innerHTML += words[word_count][letter_count]
                letter_count++;
            }
        }

        function restartInterval(){
            element[0].innerHTML = '';
            frontDisplay = setInterval(updateText, 200);
        }

        var frontDisplay = setInterval(updateText, 200)  //Starts text cycle
    }         
})

Answer 1

Make your .changing-text class be display:block.

Inline elements can have other elements to their left and right naturally, while block cannot. This SO answer has a good explanation.