Html 在按钮内居中文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32188383/
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
Centering text within a button
提问by Ovidiu G
I'm learning Front end development and I'm trying to code my first site using bootstrap. I got stuck on a pretty simple thing I guess. How do I center a text within a button ?
我正在学习前端开发，并且正在尝试使用引导程序编写我的第一个站点。我被困在一件很简单的事情上，我猜。如何使按钮内的文本居中？
This is the button, the default one using an "a" tag.
这是按钮，默认使用“a”标签。
<a class="btn btn-default btn-work" href="#">Check my work</a>
and gave it a width and a height and the text remains stuck on the top..
并给它一个宽度和一个高度，文本仍然卡在顶部..
.btn-work {
width: 250px;
height: 50px;
margin: 0 auto;
vertical-align: middle;
}
I'm also trying to align the button to the center of the container and I can't figure that out either.
我也试图将按钮与容器的中心对齐，但我也想不通。
Thanks !
谢谢 ！
采纳答案by K.Shrestha
To center the text within the button. Use this code.
使按钮内的文本居中。使用此代码。
.btn-work{ text-align: center; }
To center the button, use a parent div to align it to center.
要使按钮居中，请使用父 div 将其与中心对齐。
CSS:
CSS：
div.parentElement{text-align: center;}
.btn-work{ display: inline-block; }
HTML:
HTML：
<div class="parentElement">
<a class="btn btn-default btn-work" href="#">Check my work</a>
</div>
Full CSS:
完整的CSS：
div.parentElement{text-align: center;}
.btn-work {
width: 250px;
height: 50px;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
}
回答by Lal
See this fiddle
看到这个小提琴
Use
用
display: table-cell;
vertical-align: middle;
in your CSSfor .btn-work.
在您的CSSfor .btn-work.
So, the complete CSS would be like
所以，完整的 CSS 应该是这样的
.btn-work {
width: 250px;
height: 50px;
margin: 0 auto;
padding: 0;
display: table-cell;
vertical-align: middle;
}
And, the output of the above one be like
而且，上面的输出就像
回答by NAZ
In here you make a link as a button. You can make a button inside tag.
在这里，您可以将链接作为按钮。您可以在标签内制作一个按钮。
<a class="btn btn-default btn-work" href=""><input type="button" class="btn btn-default btn-work" value="Check my work"/></a>
