html - 按钮元素中的顶部对齐文本？

Question

我有一些具有不同行数的文本按钮，所有按钮的宽度和高度都是固定的。似乎我放在 <button> </button> 之间的任何东西默认情况下，标签垂直居中对齐。我想将按钮内的文本垂直对齐到顶部，以便每个按钮的第一行从同一行开始。

我发现的一个解决方法是 this , 但正如您在此示例 ( http://jsfiddle.net/d27NA/1/ ) 中看到的那样，使用这种方法，我必须手动为包含不同长度文本的按钮指定 top 属性，否则包含较长文本的按钮将溢出顶部。

我想知道是否有替代方法可以更优雅地解决这个问题。谢谢。

html:

<div>
    <button class="test">
        This text is vertically center-aligned. I want this to be top-aligned.
    </button>
</div>

CSS:

.test{
    font-size:12px;
    line-height:14px;
    text-align:center;
    height:100px;
    width:100px;
}

Answer 1

是的，只需将按钮定义为 position:relative; 并将 span 定义为 position:absolute;top:0;left:0; 即可.

jsFiddle updated

更新

所以在这个回答后的三年里，flexbox 变得更加突出。因此，您现在可以这样做:

.test {
    display: inline-flex; /* keep the inline nature of buttons */
    align-items: flex-start; /* this is default */
}

这应该能为您提供所需的信息。您可能需要应用 appearance: none;(使用适当的浏览器前缀)，但应该这样做。