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

我有一些按钮有不同数量的文字行，所有的都有固定的宽度和高度。看起来我默认在<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; 
}

来源

2013-04-26 Jay

是啊，只要定义按钮position:relative;和跨度position:absolute;top:0;left:0;和你在企业里。

jsFiddle updated

UPDATE

所以因为这个答案的三年中，实现Flexbox也日渐突出。因此，你现在可以这样做：

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

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

来源

2013-04-26 20:44:14 PlantTheIdea

这是伟大的。然而，对于适合单行的文本来说，文本变得左对齐（可以在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

您只需更改按钮和范围的范围。两个独立的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;  
}

设置跨度的位置绝对并设置顶属性相应

来源

2013-04-26 20:48:18 Raman

你没有包含X属性，比如'left：0;'。有时候，firefox会呕吐，只是抬起头来。 – PlantTheIdea 2013-04-26 20:58:21

@PlantTheIdea ....感谢您的纠正...我没有意识到这一点。 :) – Raman 2013-04-26 21:04:08

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

回答

相关问题