CSS MDL: vertikal alle Listenelemente Ergebnisse

Question

Ich mache eine Website mit ein paar Listen, die ich vertikal zentrieren möchte, aber wenn ich text-align: center; in die ul hinzufügen, scheint es nur auf die erste li Element im Inneren anzuwenden des Elternteils ul Element. Ich habe auch versucht, die CSS auf die einzelnen Elemente selbst anzuwenden, aber das hat merkwürdigerweise das gleiche Ergebnis ergeben.

Liste: 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

total zentriert Innen Artikel:

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