2

I thought line-height would vertically center align text. But this is not happening for my button. Why?

The text is bottom aligned in FF, Opera and Safari.

Her is my fiddle.

<button class="get_discount_rate">Button</button>
button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #444;
  min-width: 90px;
  height: 24px;
  line-height: 24px;
  margin: 5px 10px;
  background-color: #fdfdfd;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  border-radius: 3px;
}
2
  • or better yet, simply remove line-height property from the css rule
    – asprin
    Jul 21, 2012 at 23:15
  • 1
    Yeah, Sheikh Heera just prooved it :)
    – Steven
    Jul 21, 2012 at 23:15

1 Answer 1

4

Vertically center aligned text inside button (Tested in Chrome, FF, Safari, Opera and IE8)

button {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #444;
    min-width: 90px;
    padding:5px;
    margin: 5px 10px;
    background-color: #fdfdfd;
    border: 1px solid #cdcdcd;
    cursor: pointer;
    border-radius: 3px;
}​

DEMO.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.