Question

我有一个非常简单的按钮。当您在Safari或Chrome中看到文本时，文本会在方向上垂直居中。但是在Firefox中，文本没有垂直居中（它向下看）如何解决这个问题？

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

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

Answer 2

当div不是很高时，似乎Firefox在中心文本方面存在一些问题。（我不知道为什么）。在这个特定的情况下：font-family：Tahoma; font-size：11px;如果我们希望div在div中居中，那么div需要是23px或更高。

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

在这里播放：http://jsfiddle.net/yyL5T/8/

在Firefox中居中心

2 个答案: