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

【问题标题】：Top-align text within button element?按钮元素中的顶部对齐文本？
【发布时间】：2013-04-21 02:59:54
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

是的，只需将按钮定义为 position:relative; 并将范围定义为 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;（带有适当的浏览器前缀），但应该这样做。

【讨论】：

这很棒。但是，似乎对于适合单行的文本，文本左对齐（如 jsfiddle 中所示）有没有办法解决这个问题以使其居中对齐？
是的，很抱歉延迟回复。你可以像你一样设置right:0;（我更喜欢）或者设置一个明确的宽度，比如width:100%;。无论哪种方式都有效。
我觉得必须有更好的方法来做到这一点，但至少这是可行的。如果我不必将内脏设置为position:absolute;，我会更喜欢
有，因为距离这个答案已经近 3 年了。我会更新当前标准
flexbox 答案仅适用于 Chrome，不适用于 Firefox。不幸的是，Firefox 不允许您将按钮设置为弹性框...

【解决方案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的位置设置为absolute并相应设置top属性

【讨论】：

您没有包含 X 属性，例如 left:0;。 Firefox 有时会吐，只是提醒一下。

【解决方案3】：

和 PlantTheIdea 的 answer 一样，这个添加了一个 <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%;
}

【讨论】：