顶部对齐按钮元素中的文本？ [英] Top-align text within button element?

问题描述

我有一些按钮有不同数量的文本行，全部具有固定的宽度和高度。看来，我放在< button>默认情况下，< / button> 标签与中间垂直对齐。我想将按钮中的文本垂直对齐到顶部，以便每个按钮的第一行从同一行开始。

I have some buttons that have varying numbers of lines of text, all with a fixed width and height. It seems that anything I put between the <button> </button> tags are vertically aligned to the middle by default. I want to vertically align the text within the button to the top, so that the first line of each button starts at the same line.

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

One workaround I found was this, but as you can see in this example (http://jsfiddle.net/d27NA/1/), with this approach, I have to manually designate the top property for buttons that contain texts of different lengths, else buttons that contain longer text will overflow the top.

我想知道是否有一个替代方法，将以更优雅的方式解决这个问题。感谢。

I'm wondering if there is an alternate approach that will solve this problem in a more elegant way. Thanks.

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

UPDATE

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

So in the three years since this answer, flexbox has become more prominent. As such, you can do this now:

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

对于。您可能需要应用 appearance：none; （具有适当的浏览器前缀），但应该这样做。

This should give you what you're looking for. You may need to apply appearance: none; (with appropriate browser prefixes), but that should do it.

这篇关于顶部对齐按钮元素中的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！