Jak wyśrodkować listę nieuporządkowaną z dynamiczną zawartością w obszarze div?

Question

Próbuję znaleźć sposób pionowego wyśrodkowania listy nieuporządkowane w div. Znalazłem wiele sposobów, aby to zrobić, jednak znaczniki LM w moim tagu ul mają w sobie kod PHP, który pobiera tekst z bazy danych, a to powoduje, że długość tekstu wewnątrz znaczników li ma różną długość, co w znacznym stopniu powoduje przesiewanie w pionie w obrębie mój div, który ma stałą wysokość i szerokość.

W jaki sposób mogę ustawić pozycję w pionie na liście nieuporządkowanej, aby zawsze była wyrównana pionowo w obrębie tego elementu div?

Answer 1

Jeśli próbujesz do centrum poziomie, tutaj jest trochę kodu, który będzie pracować dla dowolnej długości:

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

---

Aby uzyskać centrowanie w pionie, wystarczy użyć właściwości vertical-align.
Zobacz: http://jsfiddle.net/Wexcode/fK793/

Answer 2

To całkiem proste. Po prostu użyj display:table; dla elementu nadrzędnego div i display:table-cell; i vertical-align:middle; dla potomka.

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>