Html 如何对齐按钮的文本中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13217797/
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
How to align the text middle of BUTTON
提问by PAM
Can you anyone please help me to code this below one
你能帮我在下面的代码中编码吗
This is my current code
这是我当前的代码
<div id="loginBtn" class="loginBtn"><span>Log in</span></div>
div tag have loginBtn class and span tag having "log in" text in html page
div 标签具有 loginBtn 类和 span 标签，在 html 页面中具有“登录”文本
.loginBtn {
background:url(images/loginBtn-center.jpg) repeat-x;
width:175px;
height:65px;
margin:20px auto;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px 2px #5e5d5b;
}
I created the button using 1px image. Now i am unable to place the "log in" text middle of the image can any one help me complete the code
我使用 1px 图像创建了按钮。现在我无法将“登录”文本放在图像中间，谁能帮我完成代码
text is displaying left top corner. Please help me.
文本显示在左上角。请帮我。
回答by Mr. Alien
You can use text-align: center; line-height: 65px;
您可以使用 text-align: center; line-height: 65px;
CSS
CSS
.loginBtn {
background:url(images/loginBtn-center.jpg) repeat-x;
width:175px;
height:65px;
margin:20px auto;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px 2px #5e5d5b;
text-align: center; <--------- Here
line-height: 65px; <--------- Here
}
回答by Tymek
This is more predictable then "line-height"
这比“行高”更可预测
.loginBtn {
background:url(images/loginBtn-center.jpg) repeat-x;
width:175px;
height:65px;
margin:20px auto;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px 2px #5e5d5b;
}
.loginBtn span {
display: block;
padding-top: 22px;
text-align: center;
line-height: 1em;
}<div id="loginBtn" class="loginBtn"><span>Log in</span></div>EDIT (2018): use flexbox
编辑（2018 年）：使用 flexbox
.loginBtn {
display: flex;
align-items: center;
justify-content: center;
}
回答by Omar
Sometime it is fixed by the Padding .. if you can play with that, then, it should fix your problem
有时它是由 Padding 修复的 .. 如果您可以使用它，那么它应该可以解决您的问题
<style type=text/css>
YourbuttonByID {Padding: 20px 80px; "for example" padding-left:50px;
padding-right:30px "to fix the text in the middle
without interfering with the text itself"}
</style>
It worked for me
它对我有用
回答by Huy Le
I think you can use Padding like: Hope this one can help you.
我认为你可以像这样使用 Padding：希望这个可以帮助你。
.loginButton {
background:url(images/loginBtn-center.jpg) repeat-x;
width:175px;
height:65px;
margin:20px auto;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px 2px #5e5d5b;
<!--Using padding to align text in box or image-->
padding: 3px 2px;
}
