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（根据您的需要选中browser support）。

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 Fiddle Demo

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，按钮的重要性并不重要。

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

如果将上述CSS应用于按钮标记，则无效。很高兴知道。

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

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>

按钮的文字垂直对齐

5 个答案: