CSS MDL: vertically align all list elements results

Question

I'm making a website with a few lists that I want to center vertically, though when I add text-align: center; to the ul, it only seems to apply it to the first li element inside of the parent ul element. I also tried applying the css to the induvidual li elements themselves, but this strangely enough gave the same result.

List: https://gyazo.com/d44db5e54321ea61dec4665c80013e44

<ul class="demo-list-item mdl-list">
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                2.5 uur onbeperkt eten vanaf 45 personen: &#8364;245,-.<br/> Bij hogere deelname: &#8364;5,50 pps      
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Soep naar keuze
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Puntzak/bakje friet
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Frikandel
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Kroket
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Bami/nasi schijf
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Bitterballen
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Hamburger
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Kipfingers
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Kaassoufl&#233; 
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Incl. diverse sauzen en uitjes
            </span>
        </li>
    </ul>

Answer 1

Totally centered inner items:

.someselector {
display         : flex;
justify-content : center;
align-items     : center;
}