Html 按钮的文本垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15487408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button's text vertical align
提问by Kyrbi
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>
And here is my CSS
这是我的 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;
}
You can check it out here http://jsfiddle.net/kA8pp/. I want to have the text on the bottom. Thank you very much!
你可以在这里查看它http://jsfiddle.net/kA8pp/。我想在底部有文字。非常感谢！
EDIT:I can't explain it well so here is the picture of it :)
编辑：我无法很好地解释它，所以这是它的图片:)
采纳答案by Sachin
Try padding-top:65px;in button class
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;
}
回答by npage
You can use line-heightto achieve your goal.
您可以使用它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;
}
回答by Pensierinmusica
You can use flexbox(check browser support, depending on your needs).
button {
display: inline-flex;
align-items: flex-end;
}
回答by Marc Audet
Buttons Style Differently: A Variation on Styling
按钮风格不同：风格的变化
The <button>element behaves a bit differently from some other elements, say a <div>. If you set display: table-cellin a button, it does not affect the layout, so vertical-alignwill allow you to control the text position.
该<button>元素的行为与其他一些元素略有不同，例如 a <div>。如果display: table-cell在按钮中设置，则不会影响布局，因此vertical-align可以让您控制文本位置。
On the other hand, one could do the following:
另一方面，可以执行以下操作：
<div class="button" id="rock" onClick="choose(1)">Rock</div>
and use the following CSS:
并使用以下 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;
}
In this case, you have some control by adjusting padding and height.
在这种情况下，您可以通过调整填充和高度来进行一些控制。
If you are binding a JavaScript action to the element, it does not really matter all that much what the tag is, div or button.
如果您将 JavaScript 操作绑定到元素，那么标签是什么、div 或按钮并没有那么重要。
This approach may some advantages in particular situations.
这种方法在特定情况下可能有一些优势。
If you apply the above CSS to a button tag, it will not work. Good to know.
如果您将上述 CSS 应用于按钮标签，它将不起作用。很高兴知道。
回答by Ankur Gupta
This should work for you!
这应该对你有用！
<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>
