按钮的文本垂直对齐答案

【问题标题】：Button's text vertical align按钮的文本垂直对齐
【发布时间】：2013-03-07 09:56:29
【问题描述】：

我在这里遇到了棘手的问题。我想在按钮内垂直对齐我的文本

<button id="rock" onClick="choose(1)">Rock</button>

这是我的 CSS

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
    font-size: 22px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

您可以在这里查看http://jsfiddle.net/kA8pp/。我想把文字放在底部。 非常感谢！

编辑：我无法很好地解释它，所以这是它的图片:)

【问题讨论】：

底部是什么意思，如图片下方还是图片底部？

标签： html css

【解决方案1】：

您可以使用line-height 来实现您的目标。

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    line-height: 150px;
    overflow: visible;
}

http://jsfiddle.net/kA8pp/2/

【讨论】：

我将使用 padding-top:65px;正如有人在这里所说的那样。但也非常感谢你。 :)
+1，正要写同样的答案。 @MíraKapičiak，填充是解决此问题的错误方法。这是正确的方法。
酷。使用 line-height 我可以将文本放在底部，但是垂直对齐到顶部怎么样？
我来这里是因为我尝试 not 使用 line-height，它在许多字体的浏览器中呈现不同。事实证明这并不容易..

【解决方案2】：

您可以使用flexbox（查看browser support，取决于您的需要）。

button {
  display: inline-flex;
  align-items: flex-end; 
}

【讨论】：

是的，谢谢这对我有用。尤其是显示部分。
似乎是影响按钮垂直对齐的唯一真正灵活的方式。
这不是可靠的解决方案，如buttons can't be flex elements

【解决方案3】：

在按钮类中尝试padding-top:65px;

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding-top:65px;
}

JS Fiddle Demo

【讨论】：

【解决方案4】：

不同的按钮样式：样式变化

<button> 元素的行为与其他一些元素有些不同，比如<div>。如果您在按钮中设置display: table-cell，它不会影响布局，因此vertical-align 将允许您控制文本位置。

另一方面，可以执行以下操作：

<div class="button" id="rock" onClick="choose(1)">Rock</div>

并使用以下 CSS：

.button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 90px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    padding-bottom: 10px;
}

在这种情况下，您可以通过调整内边距和高度来进行一些控制。

如果您将 JavaScript 操作绑定到元素，那么标签是什么、div 或按钮并不重要。

这种方法在特定情况下可能会有一些优势。

如果你将上面的 CSS 应用到一个按钮标签上，它将不起作用。很高兴知道。

http://jsfiddle.net/audetwebdesign/QSap8/

【讨论】：

【解决方案5】：

这应该适合你！

<pre>
.button{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #444;
    width: 32px;
    padding: 2px;
    margin-left: 5px;
    background-color: #fdfdfd;
    border: 1px solid #cdcdcd;
    cursor: pointer;
}
</pre>

【讨论】：