绝对定位范围内的文本，而不是外部？

在下面的例子：绝对定位范围内的文本，而不是外部？

<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

绝对定位范围内的文本，而不是外部？

回答

相关问题