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

我有一些按钮具有不同数量的文本行,都具有固定的宽度和高度.似乎我放在< 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;
}

解决方法

是的,只需将按钮定义为position：relative;和span作为position：absolute; top：0; left：0;而且你在做生意.

jsFiddle updated

UPDATE

因此,在这个答案后的三年里,flexBox变得更加突出.因此,您现在可以这样做：

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

这应该会给你你想要的东西.您可能需要应用外观：无; (使用适当的浏览器前缀),但应该这样做.