按钮元素中的顶部对齐文本?
我有一些按钮有不同数量的文字行,所有的都有固定的宽度和高度。看起来我默认在<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;
}
是啊,只要定义按钮position:relative;
和跨度position:absolute;top:0;left:0;
和你在企业里。
UPDATE
所以因为这个答案的三年中,实现Flexbox也日渐突出。因此,你现在可以这样做:
.test {
display: inline-flex; /* keep the inline nature of buttons */
align-items: flex-start; /* this is default */
}
这应该会给你你要找的。您可能需要申请appearance: none;
(使用适当的浏览器前缀),但应该这样做。
您只需更改按钮和范围的范围。两个独立的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;
}
设置跨度的位置绝对并设置顶属性相应
你没有包含X属性,比如'left:0;'。有时候,firefox会呕吐,只是抬起头来。 – PlantTheIdea 2013-04-26 20:58:21
@PlantTheIdea ....感谢您的纠正...我没有意识到这一点。 :) – Raman 2013-04-26 21:04:08
这是伟大的。然而,对于适合单行的文本来说,文本变得左对齐(可以在jsfiddle中看到)有没有一种方法可以解决这个问题,使其居中对齐? – Jay 2013-04-26 21:18:14
通过设置'right:0' – Jay 2013-04-26 21:27:22
修复了这个问题,对于延迟响应抱歉。你可以设置'right:0;'像你一样(我更喜欢)或者设置一个明确的宽度,比如'width:100%;'。无论哪种方式工作 – PlantTheIdea 2013-04-26 22:03:52