21

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

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

编辑：我不能很好地解释它所以这是它的图片:)

在此处输入图像描述

4

5 回答 5

26

你可以用它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/

于 2013-03-18T21:42:49.750 回答
16

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

button {
  display: inline-flex;
  align-items: flex-end; 
}
于 2016-07-23T14:49:18.847 回答
10

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

于 2013-03-18T21:42:56.383 回答
2

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

该<button>元素的行为与其他一些元素略有不同，例如 a <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/

于 2013-03-18T21:59:12.867 回答
-1

这应该适合你！

<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>
于 2017-03-29T11:23:48.707 回答