Абсолютно позиционированный ли перекрывающийся текст

Question

Итак, у меня есть странная проблема: моя текстовая анимация требует, чтобы элемент li был позиционирован как абсолютный. Это заставляет его вытекать из потока документов, и я не могу правильно выровнять текст под li без добавления отступов. Я хочу отобразить элемент i непосредственно под ul. Я сделал небольшой пример кода https://jsfiddle.net/m479w3sj/

<div id="head">
    <ul>
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
        <li><span style="color: #00a9ac">Text 4</span></li>
    </ul>

    <a class="arrow" href="#main"><i class="fa fa-arrow-down"></i></a>
</div>

CSS

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

#head ul {
    list-style-type: none;
}

#head ul li {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    transition: opacity .5s ease-in;
    font-size: 50px;
    font-weight: bold;
    color: #E3E3E3;
}

#head li + li {
    opacity: 0;
}

JS

var current = 0,
    slides = document.querySelectorAll("#head ul li");

setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length -1) ? current + 1 : 0;
    slides[current].style.opacity = 1;
}, 2000);

Answer 1

Я полагаю, что это связано с css по умолчанию тега ul.

https://www.w3schools.com/cssref/css_default_values.asp

Установив отступ в ноль в * селекторе, вы можете поместить ul в центр страницы.

Надеюсь, это то, что вы искали!