Làm cách nào để sử dụng CSS để căn giữa văn bản trong một neo, trong một LI?

Question

Các biến thể về câu hỏi này đã được hỏi nhiều lần. Dọc trung tâm với CSS là một thách thức.

Tôi có một trường hợp cụ thể, xử lý danh sách được hiển thị theo chiều ngang. Đánh dấu là như thế này:

<ul id='ul1' class='c'> 
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li> 
    <li><a href='javascript:void(0)'>Fobble</a></li> 
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li> 
    </ul> 

Phong cách là như thế này:

ul.c { 
    height:52px; 
    text-align:center; 
    } 
    ul li a { 
    float:left; 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    line-height:1em; 
    width:100px; 
    } 
    ul li a:hover { 
    background: #CCC; 
    } 
    ul li { 
    height:52px; 
    display:inline-block; 
    } 

Danh sách kết quả sẽ như thế này:

Nhưng tôi muốn tất cả các ô được cùng chiều cao và tôi muốn văn bản được căn giữa theo chiều dọc trong mỗi hộp. Tôi có thể đặt chiều cao hộp bằng cách thêm kiểu dáng height cho các phần tử A. Kết quả như sau:

... mà là gần với những gì tôi muốn, nhưng dọc định tâm không xảy ra.

Tôi có thể đặt line-height cho văn bản, as suggested in this post, để làm căn giữa. Tôi thậm chí có thể chọn các giá trị khác nhau của line-height cho các phần tử A khác nhau, nếu tôi biết yếu tố nào sẽ nhận được nhiều dòng văn bản. Nhưng tôi không biết cái nào sẽ yêu cầu nhiều dòng.

Làm cách nào tôi có thể đặt trung tâm khi một số thành phần A có văn bản kết thúc tốt đẹp?

Answer 1

Bạn có thể sử dụng display:table, vv cùng với vertical-align:middle

ul.c { 
    text-align:center; 
    display:table; 
} 

ul li { 
    float:left;  
} 

ul li a { 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    width:100px; 
    height:52px; 
    display:table-cell; 
    vertical-align:middle; 
} 

ul li a:hover { 
    background: #CCC; 
} 

Ví dụ:http://jsfiddle.net/kf52n/2/

Answer 2

Tôi không thể tìm ra cách để thực hiện việc này trong CSS. Tôi thấy rằng Tôi có thể làm những gì tôi cần với Javascript, đặt padding-top và padding-bottom thành các giá trị thích hợp khi chạy. Kỹ thuật này là để đo chiều cao "tự nhiên" của phần tử A, sau đó đặt phần đệm sao cho phần tử A được căn giữa theo chiều dọc.

đây là đoạn code js cần thiết:

function setHeightIntelligently(ulElement) { 
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight, 
     naturalHeight, pad; 
    items = ulElement.children; 
    for(i=0, L1 = items.length;i<L1;i++){ 
     if (items[i].tagName.toUpperCase() == 'LI') { 
     anchor = items[i].children[0]; 
     naturalHeight = anchor.clientHeight; 
     pad = (availableHeight - naturalHeight)/2; 
     anchor.style.paddingTop= pad+'px'; 
     anchor.style.paddingBottom= pad+'px'; 
     } 
    } 
    } 

    function init() { 
    var element = document.getElementById('ul1'); 
    setHeightIntelligently(element); 
    } 

Trong CSS, người ta không phải thiết lập một cách rõ ràng chiều cao hoặc đệm cho các yếu tố A. Làm như vậy sẽ khiến chiều cao "tự nhiên" không phải là thứ chúng ta cần.

Kết quả là như thế này:

Để nhìn thấy nó trong hành động, go here.

Answer 3

trong css bạn đã thiết lập chiều cao và line-height cùng. Sau đó, bạn sẽ nhận được một hộp hình chữ nhật.

Nhưng bạn vẫn đang nhìn thấy không gian ở phía dưới lý do là do đệm

thêm hai giá trị trong đệm thêm trên và dưới đệm

padding: top đáy;

vì nó là 2 và 12 bạn đang thấy không gian rộng lớn.

thử này

height: 52px; 
line-height:52px; 
padding: 6px 6px; // here you have to tweak and see the output 
vertical-align:center; 

cho tôi biết nó đang làm việc

Answer 4

Cũ câu hỏi, nhưng câu trả lời bây giờ có thể được cập nhật với Flexbox.

a { 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}