按钮的文本垂直对齐 [英] Button's text vertical align

问题描述

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

I have got tricky problem here. I'd like to vertical align my text inside a button

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

You can check it out here http://jsfiddle.net/kA8pp/ . I want to have the text on the bottom. Thank you very much!

编辑：我无法解释，所以这里是它的图片 http://i.imgur.com/WGKltUa.png ：）

I can't explain it well so here is the picture of it http://i.imgur.com/WGKltUa.png :)

推荐答案

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

Try padding-top:65px; in button class

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

这篇关于按钮的文本垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！