Căn chỉnh văn bản theo chiều dọc trong thành phần <a> với CSS

Question

Ai đó có thể giải thích cách tôi căn chỉnh văn bản theo chiều dọc ở các phần tử <a> - vì vậy cả hai văn bản đều xuất hiện ở giữa hộp màu đỏ?

http://jsfiddle.net/WeKtX/

Dưới đây là tôi HTML:

<ul> 
<li><a href="#">this is a link</a></li> 
<li><a href="#">this is an even longer link</a></li> 
</ul> 

và CSS của tôi:

li {list-style-type:none;margin:0;padding:0} 
li a {width:100px;float:left;background:red;margin-right:20px;height:40px} 

Rất cám ơn cho bất kỳ con trỏ

Answer 1

Nếu bạn muốn tập trung các văn bản theo chiều ngang sau đó thử:

text-align: center; 

Nếu bạn muốn tập trung các văn bản theo chiều dọc sau đó thử:

line-height: 40px; //Where 40px is the height of your parent element 

Hãy ghi nhớ, rằng khi sử dụng line-height, nó sẽ chỉ hoạt động trên một dòng văn bản. Nếu bạn muốn làm nhiều dòng văn bản thì tôi sợ bạn phải chỉ định chiều cao cho văn bản và sau đó sử dụng position: absolute; trên văn bản với position: relative; trên phần tử gốc.

Ví dụ nhiều dòng của bạn tôi muốn thử một cái gì đó giống như the following jsFiddle:

li { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    position: relative; 
    height: 60px; 
    width: 200px; 
    display: block; 
    background:red; 
} 

li a { 
    width:100px; 
    height:40px; 
    position: absolute; 
    top: 50%; 
    margin-top: -20px; 
}