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

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -