相关疑难解决方法(0)

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

我找到的一个解决方法就是这个,但正如你在这个例子中所看到的(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;
}

DEMO可在以下位置找到:

http://www.bootply.com/VZ7gvA7ndE#

我将高度设置div为100px,并希望显示label在底部div.我用

#contain-word-lab {
  vertical-align: bottom;
  margin-bottom: 5px;
}

但是,这根本不起作用.将label仍然对齐的顶部div.

有没有人对此有任何想法？为什么vertical-align不在这里工作？谢谢!