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

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。

Answer 2

试试这个： -

这是解决方案，但你必须要玩：

.button{
    margin-top: 0px;
    height:15px;
    font-size:10px;
    line-height:6px;
}

fiddle demo

Answer 3

---

设置按钮的静态高度并添加填充：0px 10px 10px;

<button  class="button"  style="padding: 0px 10px 10px; height:30px""> Button text </button> 

小提琴 - http://jsfiddle.net/cJ6bD/2/

Answer 4

将行高设置为1px（或@podeMonk所做的6px）将文本放在按钮的顶部。

Answer 5

请参阅：http://jsfiddle.net/5HdZ2/2/

这很丑陋：我将文字换成span.txt并将其复制为span.hidden。

隐藏的跨度用于保持按钮的大小。然后，.txt绝对定位，所以你可以把它放在你想要的地方。

在我看来，这是唯一适用于所有情况的解决方案（crossbrowser，无论按钮大小如何）。但是，这很难看。