Làm cách nào tôi có thể căn giữa danh sách không có thứ tự với nội dung động trong div?

Question

Tôi đang cố gắng tìm ra cách để theo chiều dọc đặt giữa một danh sách không theo thứ tự trong một div. Tôi tìm thấy một số cách để làm điều này, tuy nhiên các thẻ li trong thẻ ul của tôi có mã PHP trong đó nhận văn bản từ cơ sở dữ liệu và điều này làm cho độ dài của văn bản trong các thẻ li thay đổi theo chiều dài đáng kể. div của tôi có chiều cao cố định và chiều rộng.

Tôi có thể định vị theo chiều dọc danh sách không theo thứ tự theo chiều dọc để nó luôn được căn chỉnh theo chiều dọc trong div này?

Answer 1

Nếu bạn đang cố gắng tập trung theo chiều ngang, đây là một chút mã mà sẽ làm việc cho bất kỳ chiều dài:

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

---

Để căn giữa, chỉ cần tận dụng thuộc tính vertical-align.
Xem: http://jsfiddle.net/Wexcode/fK793/

Answer 2

Nó khá đơn giản. Chỉ cần sử dụng display:table; cho div cha và display:table-cell; và vertical-align:middle; cho trẻ.

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>