按钮的文字垂直对齐

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/.我希望文本在底部.非常感谢你!

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

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/

Answer 2

您可以使用flexbox(根据您的需要检查浏览器支持).

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

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小提琴演示