Html 按钮元素中的顶部对齐文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16244860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Top-align text within button element?
提问by Jay
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.
我有一些按钮有不同数量的文本行，所有的宽度和高度都是固定的。似乎我放在<button> </button>标签之间的任何东西默认都垂直对齐到中间。我想将按钮内的文本垂直对齐到顶部，以便每个按钮的第一行从同一行开始。
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.
我发现的一种解决方法是this，但正如您在此示例中所见（http://jsfiddle.net/d27NA/1/），使用这种方法，我必须手动指定包含不同长度文本的按钮的 top 属性, 否则包含较长文本的按钮将溢出顶部。
I'm wondering if there is an alternate approach that will solve this problem in a more elegant way. Thanks.
我想知道是否有一种替代方法可以以更优雅的方式解决这个问题。谢谢。
html:
html：
<div>
<button class="test">
This text is vertically center-aligned. I want this to be top-aligned.
</button>
</div>
css:
css：
.test{
font-size:12px;
line-height:14px;
text-align:center;
height:100px;
width:100px;
}
回答by PlantTheIdea
Yup, just define the button as position:relative;and the span as position:absolute;top:0;left:0;and you're in business.
是的，只需将按钮定义为position:relative;和跨度定义为position:absolute;top:0;left:0;，您就可以开展业务。
UPDATE
更新
So in the three years since this answer, flexbox has become more prominent. As such, you can do this now:
所以在这个回答之后的三年里，flexbox 变得更加突出。因此，您现在可以这样做：
.test {
display: inline-flex; /* keep the inline nature of buttons */
align-items: flex-start; /* this is default */
}
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.
这应该给你你正在寻找的东西。您可能需要申请appearance: none;（使用适当的浏览器前缀），但这应该可以。
回答by Raman
You just need to change the CSS of Buttonand Span. Separate both the CSS and make following changes:
您只需要更改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;
}
Set the position of spanas absoluteand set topproperty accordingly
将span的位置设置为绝对位置并相应地设置top属性
回答by Distortum
Like PlantTheIdea's answer, this one adds a <span>, but is simpler and works across browsers.
像 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%;
}
