10

我有一些按钮，它们有不同数量的文本，所有的宽度和高度都是固定的。默认情况下，我在标签之间放置的任何东西似乎<button> </button>都垂直对齐到中间。我想将按钮内的文本垂直对齐到顶部，以便每个按钮的第一行从同一行开始。

我发现的一个解决方法是这样，但正如您在此示例（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;
}
4

3 回答 3

15

是的，只需将按钮定义为position:relative;，将跨度定义为position:absolute;top:0;left:0;，您就可以开展业务了。

jsFiddle 更新了

更新

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

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

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

于 2013-04-26T20:44:14.937 回答
6

您只需要更改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的位置设置为绝对位置并相应地设置top属性

于 2013-04-26T20:48:18.093 回答
0

就像 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%;
}
于 2018-05-18T06:04:36.783 回答