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

Posted 2023-03-05

【中文标题】按钮标签和与动态内容的垂直对齐

【英文标题】：Button tag and vertical alignment with dynamic content

【发布时间】：2014-06-26 03:15:57

【问题描述】：

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

我尝试了一些方法，例如让它显示：我在某处看到的 table-cell，但没有任何乐趣。

文本是动态的，因此它可以是 1 个单词或一个短段落，因此不希望使用 line-height 或类似的。

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/

【问题讨论】：

也许停止使用button 并改用div？

@Paulie_D 这在我的情况下语义不正确，因此按钮:)

一个 div 没有语义......所以没关系。你的“按钮”会做什么？

【参考方案1】：

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

jsFiddle example

【讨论】：

那么填充真的是让文本置顶的唯一方法吗？我看到一篇文章使用了非常大的行高来可靠地将其放到底部，但它无助于将其放到顶部

@ChrisM - 另外更改多行文本的行高将不起作用。

确实如此。所以填充它！

在@eric 第一次参与时将其授予他

【参考方案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/

【讨论】：

根据标题内容是动态的，所以我不知道是1个字，还是一小段

我建议在这种情况下使用 div 而不是按钮