html - 如何对齐按钮文本顶部而不是中心？

Question

我的按钮设计如下。

<button class="button" style="vertical-align: top; margin-top: 0px; height: 15px"  onclick="ShowTaskDetails()">
    <%: request.Id%> 
</button> 

如果按钮的高度为 15px，则按钮文本在某些浏览器中不可见 - 它显示在按钮下方。我需要在按钮顶部显示按钮文本。我怎样才能做到这一点？

Answer 1

可能有几种方法可以做到这一点，但超出了我的头脑。您可以将文本包装在 <span> 中然后把它放在里面。

HTML:

<button>
    <span>Test</span>
</button>

CSS:

button {
    height:35px;
}
span {
    position: relative;
    top: -12px;
    font-size: 10px;
}

就像我说的，可能还有其他方法可以做到这一点。这是用于固定按钮高度的，如果您的按钮没有固定高度，请不要使用它。

OP，你应该更好地解释发生了什么。只是文字不见了？如果按钮有一个固定的高度和正确的 font-size它将显示在所有 浏览器中。将文本推到顶部不是一个好的选择。您应该找到导致按钮显示错误的原因。尝试发布更多相关代码，以便我们查看。

DEMO HERE

注意:高度设置为35px在我的显示文本位于顶部。很难在 15px 上显示高度按钮。代码很容易更改以适用于 15px .