Chiều cao đường thẳng với chiều rộng đường viền khác nhau (border-box)

Question

Trong ví dụ đơn giản này, tôi có 4 vòng tròn, mỗi vòng có chiều rộng đường viền khác nhau và tôi cố gắng duy trì chiều cao đường bằng nhau để giữ chúng theo chiều ngang.

Tuy nhiên độ rộng biên giới dường như ảnh hưởng đến chiều cao dòng (mặc dù là về mặt kỹ thuật ngoài vòng cấm địa?)

Liệu có cách nào để giải quyết này mà không tự điều chỉnh mỗi line-height?

width: 50px; 
height: 50px; 
border-radius: 50px; 
border: 1px solid #1daeec; 
line-height: 50px; 

Ví dụ: http://jsfiddle.net/vcJ3G/

Answer 1

Bạn có thể loại bỏ các line-height, sử dụng display:table-cell thay vào đó, và thêm vertical-align:middle; đến lớp stat của bạn.

jsFiddle example

.stat { 
    display: table-cell; 
    width: 50px; 
    height: 50px; 
    border-radius: 50px; 
    border: 1px solid #1daeec; 
    text-align: center; 
    margin: 10px; 
    font-size: 16px; 
    color: #1daeec; 
    text-transform: uppercase; 
    vertical-align:middle; 
} 

Answer 2

css của bạn hoạt động tốt tất cả các bạn phải làm là loại bỏ một số từ phần đầu

* { 
    margin: 0px; 
    padding: 0px; 

} 

http://jsfiddle.net/techsin/vcJ3G/15/

Answer 3

đi qua này và nghĩ rằng bản thân mình thế nào là nó có thể làm điều đó mà không cần sử dụng ô bảng, giải pháp của tôi có lẽ không phải là tốt nhất, nhưng tôi chỉ quyết định để chia sẻ nó. http://codepen.io/svdovichenko/pen/rObzqM?editors=110

thêm <span>1</span> (có thể sử dụng lớp bên trong thư rác không sử dụng trong ví dụ này)

.stat{ 
    position: relative; 
} 

và

span { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
}