css - Equal line height with varying border width (border-box) -


in simplified example have 4 circles, each varying border-width , trying maintain equal line height in each keep them horizontally aligned.

however border width seems effect line height (despite being technically outside box?)

is there anyway solve without manually adjusting each line-height?

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

example: http://jsfiddle.net/vcj3g/

you can remove line-height, use display:table-cell instead, , add vertical-align:middle; stat class.

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; } 

Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -