Làm cách nào để căn giữa các phần tử thanh điều hướng theo chiều dọc (Twitter Bootstrap)?

Question

Đây là CSS/LESS mã của tôi CSS cho đến nay:

//make navbar taller 
@navbarHeight: 60px; 

//make navbar link text 18px 
.navbar-inner { 
    font-size: 18px; 
} 

//make navbar brand text 36px 
.navbar .brand { 
    font-size: 36px; 
} 

nào sản xuất này:

FYI Tôi đang sử dụng mã bản demo Twitter Bootstrap, tôi đã không thay đổi html (ngoài việc thay đổi tên thương hiệu).

Như bạn có thể thấy, tên thương hiệu được căn giữa theo chiều dọc trong thanh điều hướng giống như vậy, nhưng các liên kết điều hướng không (chúng cao hơn một chút so với phía trên). Vấn đề chỉ trở nên rõ ràng khi tôi thay đổi chiều cao của thanh điều hướng. Làm thế nào tôi có thể làm cho chúng được làm trung tâm theo chiều dọc (ví dụ như trang web this)?

Nếu đó là bất kỳ sự giúp đỡ, làm nổi bật các yếu tố trong Chrome sẽ hiển thị này:

Answer 1

Lớp .brand sử dụng line-height khác với văn bản cơ bản được sử dụng trong suốt Bootstrap, cũng như một vài khác biệt chính khác.

phần có liên quan từ bootstrap navbar gốc LESS -

Đối .brand:

.brand { 
    // Vertically center the text given $navbarHeight 
    @elementHeight: 20px; 
    padding: ((@navbarHeight - @elementHeight)/2 - 2) 20px ((@navbarHeight - @elementHeight)/2 + 2); 
    font-size: 20px; 
    line-height: 1; 
} 

Đối với liên kết trong thanh điều hướng:

.navbar .nav > li > a { 
    @elementHeight: 20px; 
    padding: ((@navbarHeight - @elementHeight)/2 - 1) 10px ((@navbarHeight - @elementHeight)/2 + 1); 
    line-height: 19px; 
} 

Bạn có lẽ sẽ cần phải chơi xung quanh với các giá trị của @elementHeight, line-height và có thể padding cho số .navbar .nav > li > a chọn hoặc để phản ánh 60px lớn hơn @navbarHeight (các giá trị mặc định này có nghĩa là cho một 40px @navbarHeight). Có thể thử 40px @elementHeight và/hoặc chiều cao dòng 29px để bắt đầu.

Answer 2

Bạn có thể thử này:

display: table-cell;

Answer 3

Nếu câu trả lời ở trên không giúp đỡ, và bạn chưa chạm vào html, điều duy nhất tôi có thể nghĩ đến là css. Bạn có thể muốn xem css mà ví dụ bootstrap đã sử dụng và sửa đổi kích thước của .navbar-inner và .navbar .brand cho phù hợp.

Answer 4

Tôi vừa gặp sự cố tương tự với Bootstrap 3 nhưng với thương hiệu ưu tú. Cuối cùng tôi đã sử dụng css sau:

.navbar-brand { 
    font-size: 3em; 
    line-height: 1em; 
} 

Thanh điều hướng của tôi đã tăng kích thước do hình ảnh 50px, với lề trên và dưới 10px. Không chắc chắn nếu đó là sự giúp đỡ nào.