khoảng trung tâm theo chiều dọc (bootstrap nhãn) cùng với các yếu tố khác

Question

Tôi muốn sử dụng các nhãn inline của khuôn khổ bootstrap css:

<span class="label">Default</span> 

Đáng tiếc là các nhãn không theo chiều dọc làm trung tâm khi sử dụng cùng với các yếu tố khác.

<p> 
    <span class="label"><a href="#">test</a></span>This is a test heading. 
</p> 

Xin vui lòng xem mã đầy đủ cho một ví dụ trực quan: http://jsfiddle.net/kvPpm/

Tôi nhận thức được line-height và tuyệt đối/cách giải quyết vị trí tương đối nhưng đã không thể áp dụng chúng một cách chính xác.

Làm cách nào để tôi có thể căn giữa các nhãn này?

Answer 1

Kể từ <span> là một yếu tố inline theo mặc định bạn chỉ có thể làm:

span { vertical-align: middle|top|bottom; } 

Và nó cũng làm việc. http://jsfiddle.net/kvPpm/1/

Nhưng sau đó <a> bên trong <span> không đúng về mặt ngữ nghĩa. Bạn chỉ có thể sử dụng <a> và tạo kiểu cho nó display: inline.

http://jsfiddle.net/kvPpm/3/

Answer 2

.label { vertical-align: top; } 

này đã làm việc cho tôi khi tôi muốn nó được sắp xếp đúng trong một ul