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

Question

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

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

CSS MDL: vertically align all list elements results

html

css

text-align

html-lists