Question

I have a very simple button. The text appears right centered vertically respect the square when you see it in Safari or Chrome. But in Firefox the text is not centered vertically (it looks down) How to solve this?

http://jsfiddle.net/yyL5T/5/

HTML:

<div class="buy">mmmmm</div>

CSS:

body {
  font-family:Tahoma;
  color:#fff; 
  font-size:11px; 
  letter-spacing:1px;
}

.buy {
  position:absolute;
  width: 70px;
  height: 20px;
  line-height:20px;
  top:50px;
  left:50px;
  text-align:center;
  background-color:#bbb;
}

Answer 1

It seems that Firefox have some problems to center text when the div is not very high. (I don’t know why). In this specific case: font-family: Tahoma; font-size: 11px; the div needs to be 23px or more if we want it to be well centered in the div

.buy {
  position:absolute;
  width: 70px;
  height: 25px; /* this is what changes */
  line-height:25px; /* this is what changes */
  top:50px;
  left:50px;
  text-align:center;
  background-color:#bbb;
}

Playing here: http://jsfiddle.net/yyL5T/8/