Html 制作 CSS 按钮：定位文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17436843/
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
Making a CSS button: positioning the text
提问by Senjai
I'm trying to make a rudimentary css button.
我正在尝试制作一个基本的 css 按钮。
I'm encountering errors while trying to position the text vertically and horizontally centered within the button. I have this following html.
我在尝试在按钮内垂直和水平居中放置文本时遇到错误。我有以下html。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#button
{
background:lightblue;
border-radius: 30px;
width: 15em;
height: 3em;
position:relative;
}
h1 {
vertical-align: center;
text-align: center;
}
</style>
<title>Making a button...</title>
</head>
<body>
<div id="button"><h1>Click Me</h1></div>
</body>
</html>
jsfiddle for this question: http://jsfiddle.net/CRpvr/
这个问题的jsfiddle：http: //jsfiddle.net/CRpvr/
I was told there was a workaround using line-height: 100%, but if I need more than one line, this doesnt work very well. What is the most idiomatic and proper way to accomplish this?
有人告诉我有一种使用 的解决方法line-height: 100%，但是如果我需要多于一行，这不会很好地工作。完成此任务的最惯用和正确的方法是什么？
回答by jycr753
回答by Chris
Simply change "height" within your button ID to "line-height". I checked this and it worked.
只需将按钮 ID 中的“高度”更改为“行高”。我检查了这个并且它起作用了。
回答by Robert McKee
Add display: table-cell; vertical-align: middlemight work for you.
添加display: table-cell; vertical-align: middle可能对你有用。
jsfiddle: http://jsfiddle.net/CRpvr/7/
jsfiddle：http: //jsfiddle.net/CRpvr/7/
回答by Thought Space Designs
Just set a padding on your id="button" rather than a height, like so:
只需在 id="button" 上设置填充而不是高度，如下所示：
#button
{
background:lightblue;
border-radius: 30px;
width: 15em;
padding:1em;
position:relative;
}
This will create a top and bottom padding on the div and spread the top and bottom equal distances away from your wording. This also eliminates the need for your vertical align attribute in the h1 CSS tag.
这将在 div 上创建一个顶部和底部填充，并将顶部和底部与您的措辞等距离分开。这也消除了对 h1 CSS 标签中的垂直对齐属性的需要。
回答by Grant Weiss
Add line-height:3em;to the #buttonstyle. Make the value of it the same as the height. If you need two lines, make it half the height, and so on. Just make sure to make your font-sizesmaller the more lines you have.
添加line-height:3em;到#button样式。使其值与高度相同。如果您需要两条线，请将其设为高度的一半，依此类推。只要确保你font-size的线条越多，线条越小。
If you want to keep the font-sizethe same, you can make the button taller by adjusting the height to the amount of lines you have.
如果您想保持font-size不变，您可以通过将高度调整为您拥有的行数来使按钮更高。
回答by Milche Patern
Just make your container the right height, then vertically align within it this way ::
只需将您的容器设置为正确的高度，然后以这种方式在其中垂直对齐 ::
<style type="text/css">
#button
{
background:lightblue;
border-radius: 30px;
width: 15em;
height: 3em;
line-height: 3em; /* <-- this was it ! */
vertical-align: middle;
position:relative;
}
h1 {
vertical-align: middle;
/*vertical-align: center;*/ /* w.t.f? */
text-align: center;
}
</style>
PS, validate your CSS : vertical-align:center is not correct ???
PS，验证您的 CSS：vertical-align:center 不正确？？？
