絕對定位範圍內的文本，而不是外部？

在下面的例子：絕對定位範圍內的文本，而不是外部？

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Test Button</title> 
    <style type="text/css"> 
.myline { 
    background-color: #FFF; 
    width: 96%; 
    padding-left: 2%; 
    padding-right: 2%; 
    height: 8vh; 
    padding-top: 0vh; 
    border-bottom: 0.3vh black; 
    border-style: none none solid none; 
    font-size: 0.9em; 
    line-height: 8vh; 
    position:relative; 
} 
span.testbutton { 
    width: 5em; 
    height: 1.5em; 
    display: inline; 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin-top: -0.75em; 
    background-color: #EEE; 
    font-size: 0.9em; 
} 
    </style> 
    </head> 
    <body> 

<div class="myline"> 
<span class="testbutton">DO IT</span> 
</div> 

    </body> 
</html>

...我希望文字的<span>內呈現，但是這是火狐44如何呈現它：

曾經出現在上面的圖片，文字是下面的<span> - 不在裏面，就像我預料的那樣？

如果我從span.testbutton中刪除position:absolute;，那麼文本就在裏面 - 但是我也不能使用right:0;。

我該如何修復我的代碼，以便在span內的文本位置？

來源

2016-02-11 sdaau

在您的元素的相同height處添加一個line-height。

line-height: 1.5em;

來源

2016-02-11 11:12:55 Phiter

它的工作原理@PhiterFernandes - 非常感謝！將代碼添加到'span.testbutton'類中......我在倒計數到期後立即接受這個'：''乾杯！ – sdaau

很高興我可以幫助:) – Phiter

我有兩個解決方案

首個解決方案

span.testbutton { 
    background-color: #eee; 
    display: inline; 
    font-size: 0.9em; 
    height: 1.5em; 
    margin-top: -19px; 
    padding: 0 0 10px; 
    position: absolute; 
    right: 0; 
    text-align: center; 
    top: 50%; 
    width: 5em; 
}

第二種解決

span.testbutton { text-align: center; line-height: 1.5em; }

來源

2016-02-11 11:16:54

非常感謝@DhavalPatel - 看起來不錯，歡呼！ – sdaau

絕對定位範圍內的文本，而不是外部？

回答

相關問題