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

Question

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

我找到的一个解决方法就是这个,但正如你在这个例子中所看到的(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;和跨度一样position:absolute;top:0;left:0;,您就可以开展业务了.

jsFiddle已更新

UPDATE

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

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

这应该会给你你想要的东西.您可能需要申请appearance: none;(使用适当的浏览器前缀),但应该这样做.

Answer 2

您只需要更改Button和Span的 CSS 。将 CSS 分开并进行以下更改：

button {
    display: block;
    position: relative;
}

span {
    display: block;
    position: absolute; //<-- Make it absolute
    top: 0px;           //<-- Set the top property accordingly. In this case 0px;    
}

将span的位置设置为绝对位置并相应地设置top属性