CSS MDL：垂直对齐所有列表元素结果

Question

我正在制作一个网站，其中包含一些我想要垂直居中的列表，但是当我添加text-align: center;到 时ul，它似乎只将它应用于li父ul元素内的第一个元素。我也尝试将 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;
}