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.
.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
Post a Comment