Firefox中的垂直中心

2012-05-17 83 views 0 likes

我有一个非常简单的按钮。当您在Safari或Chrome中看到该文字时，文字显示在垂直方向的正中央。但在Firefox中，文本不是垂直居中（它看起来不对）如何解决这个问题？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; 
}

来源

2012-05-17 Nrc

'垂直align'是为内联元素，而不是容器。你把它看作是'' – AlienWebguy

在firefox上，我看起来很好。 – xivo

FF 12中的小提琴看起来很好。 – Maverick

回答

看来，火狐有一些问题想居中文本时在div不是很高。（我不知道为什么）。在这个特定的情况下：font-family：Tahoma; font-size：11px;在div必须是23像素或更多，如果我们希望它很好地集中在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; 
}

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

来源

2012-05-20 09:26:59 Nrc

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

来源

2012-05-17 15:06:09 Dev

Firefox中的垂直中心

回答

相关问题