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

Question

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

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

我想知道是否有另一种方法可以更优雅的方式解决这个问题。 谢谢。

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已更新

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属性

Answer 3

就像PlantTheIdea的回答一样，这个增加了一个<span> ，但更简单，适用于各种浏览器。

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

.test > span {
    display: block;
    height: 100%;
}

Answer 4

我会将 BUTTON 标记替换为 A 或 DIV，然后将其设置为看起来像一个按钮。