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

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;
}

原文由 Jay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，只需将按钮定义为 position:relative; 并将跨度定义为 position:absolute;top:0;left:0; 开展业务。

jsFiddle更新

更新

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

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

这应该给你你正在寻找的东西。您可能需要应用 appearance: none; （使用适当的浏览器前缀），但应该这样做。

原文由 PlantTheIdea 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Raman 发布，翻译遵循 CC BY-SA 3.0 许可协议