Question

我有一些包含文字的按钮。我正在尝试设置样式，使按钮内的文本垂直对齐到顶部，就像它是div一样，而不是在中间。

我尝试了一些比如显示：我在某个地方看过的桌子，但没有快乐。

文本是动态的，因此它可以是1个单词，也可以是短段，因此不希望使用行高或类似。

CSS

button {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 0 20px 0 0;

    background: #EBEBEB;
    color: #124191;
    font-size: 16px;
    text-align: left;
    border: none;

    display: table-cell;
    vertical-align: top;
}

标记

<button>Text</button>

<button>Some more text that may go onto multiple lines like this...</button>

所以我的问题：如何将按钮内的文字垂直对齐到顶部？

http://jsfiddle.net/DNcR6/1/

Answer 1

无论按钮的文本如何，如果您将底部填充设置为与按钮高度匹配，它将尽可能远地推送文本。所以padding: 10px 10px 200px 10px;会这样做。

<强> jsFiddle example

Answer 2

由于您使用固定宽度，只需在底部添加一些填充：

 button {
  width: 200px;
  height: 200px;
  padding: 10px;
  padding-bottom: 120px;
  background: #EBEBEB;
  color: #124191;
  font-size: 16px;
  text-align: left;
  border: none;
  display: table-cell;
  vertical-align: top;
}

http://jsfiddle.net/DNcR6/2/

按钮标签和垂直对齐动态内容

2 个答案: