CSS MDL：垂直對齊所有列表元素的結果

Question

我正在制作一個網站，其中包含一些我想垂直居中的列表，盡管當我添加text-align: center; 對於ul ，似乎只將其應用於父ul元素內的第一個li元素。 我也嘗試將css應用於工業li元素本身，但是奇怪的是給出了相同的結果。

列表： 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

完全居中的內部項目：

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