Come posso centrare una lista non ordinata con contenuto dinamico all'interno di div?

Question

Sto cercando di capire un modo per centrare verticalmente una lista non ordinata all'interno di un div. Ho trovato un certo numero di modi per farlo, tuttavia i tag li all'interno del mio ul tag hanno un codice PHP in essi che ottiene il testo da un database e questo fa sì che la lunghezza del testo all'interno dei tag li vari in modo significativo causando una variazione verticale all'interno il mio div che ha un'altezza e una larghezza fisse.

Come posso posizionare verticalmente il mio elenco non ordinato in modo che sia sempre allineato verticalmente all'interno di questo div?

Answer 1

se si sta cercando di centrare orizzontalmente, ecco un po 'di codice che funziona per un certo periodo:

in anteprima: http://jsfiddle.net/Wexcode/6UtFz/

HTML:

<div> 
    <ul> 
     <li><a href="#">Element 1</a></li> 
     <li><a href="#">Element 2</a></li> 
     <li><a href="#">Element 3</a></li> 
     <li><a href="#">Element 4</a></li> 
    </ul> 
</div> 

CSS:

div { overflow: hidden; } 
ul { 
    position: relative; 
    float: left; 
    left: 50%; 
    padding: 0; 
    list-style: none; } 
li { 
    position: relative; 
    float: left; 
    right: 50%; 
    margin: 0 5px; } 

---

Per la centratura verticale, è sufficiente utilizzare la proprietà vertical-align.
Vedi: http://jsfiddle.net/Wexcode/fK793/

Answer 2

È piuttosto semplice. Basta usare display:table; per il genitore div e display:table-cell; e vertical-align:middle; per il bambino.

Fiddle: https://jsfiddle.net/fzfa312m/

div { 
 
    background: #f2f2f2; 
 
    width: 300px; 
 
    height: 300px; 
 
    display:table; } 
 

 
ul { 
 
    vertical-align: middle; 
 
    display: table-cell; }

<div> 
 
    <ul> 
 
     <li><a href="#">Element 1</a></li> 
 
     <li><a href="#">Element 2</a></li> 
 
     <li><a href="#">Element 3</a></li> 
 
     <li><a href="#">Element 4</a></li> 
 
    </ul> 
 
</div>