Center vertical in Firefox

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

`vertical-align` is meant for inline elements, not for containers. You're treating it like `` — AlienWebguy, May 17 '12 at 14:58
When the jsFiddle links go dead, this question is totally useless. Please re-work your question to expand your explanation and include your code. — Sparky, May 17 '12 at 15:03
This similar question may help you: http://stackoverflow.com/questions/5599343/position-of-text-in-a-submit-button — Jonah Bishop, May 17 '12 at 15:12
If you remove the vertical-aling nothing changes. This is not the point — Nrc, May 17 '12 at 15:30
In Firefox and in a mac there is more space on the top that on the bottom — Nrc, May 17 '12 at 15:31

score 0 · Answer 1 · answered May 17 '12 at 15:06

0

.comprar {
    position:absolute;
    top:50px;
    left:50px;
    text-align:center;
    background-color:#bbb;
    padding: 5px 10px;
}

answered May 17 '12 at 15:06

Riz

9,703
8
38
54

Nrc · Accepted Answer · 2013-09-12T08:42:00.507

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/

Center vertical in Firefox

2 Answers2