Question

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

我找到的一个解决方法是this，但正如您在此示例中所见（http://jsfiddle.net/d27NA/1/），使用此方法，我必须手动指定包含不同长度文本的按钮的top属性，否则包含较长文本的按钮将溢出顶部。

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

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;
}

Answer 1

是的，只需将按钮定义为position:relative;，将范围定义为position:absolute;top:0;left:0;即可开展业务。

jsFiddle updated

<强>更新

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

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

这应该可以满足您的需求。您可能需要应用appearance: none;（带有适当的浏览器前缀），但应该这样做。

Answer 2

您只需要更改按钮和跨度的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;    
}

将范围的位置设置为绝对，并相应地设置顶部属性

Answer 3

与PlantTheIdea answer一样，这个添加<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%;
}

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

3 个答案: