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;
}

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

1 个答案: