按钮文本垂直对齐

Question

我这里有一个棘手的问题。我想在按钮内部垂直对齐我的文本。

<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/。我想把文字放在底部。非常感谢！

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

- Kyrbi

---

你所说的“on the bottom”是指在图片下方还是仅仅在图片底部？ - npage

Answer 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/

- npage

---

我会使用padding-top:65px;，正如有人在这里说的一样。非常感谢你。:) - Kyrbi

+1，我也想写同样的答案。@MíraKapičiak，填充是解决这个问题的错误方法。这才是正确的方法。 - Starx

很酷。使用行高，我可以将文本放在底部，但如何将其垂直对齐到顶部？ - MilkyTech

我在这里是因为我试图不使用行高（line-height），因为它在许多字体上在不同的浏览器中呈现不同。结果发现这并不容易... - Yuji 'Tomita' Tomita

Answer 2

您可以使用flexbox（根据您的需求，可以检查浏览器支持情况）。

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

- Pensierinmusica

---

谢谢，这对我很有效。特别是显示部分。 - Jonathan Laliberte

似乎是影响按钮垂直对齐的唯一灵活方式。 - certainlyakey

这不是可靠的解决方案，因为按钮无法作为弹性元素。 - RoelN

Answer 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演示

- Sachin

Answer 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还是button并不重要。

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

如果您将上述CSS应用于button标记，则它将不起作用。很好知道。 http://jsfiddle.net/audetwebdesign/QSap8/

- Marc Audet

Answer 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>

- Ankur Gupta