Html 如何在自定义按钮中对齐中心文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16667536/
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 align center text in custom buttons?
提问by Bae
I have this html
我有这个 html
<head>
<title>HTML5 App</title>
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/buttons.css">
</head>
<body>
<!--Estructura -->
<div id="botones">
<button class="btn" data-am-type="button">Soy un <button></button>
<a class="btn" data-am-type="button">Soy un <a></a>
<div class="btn" data-am-type="button">Soy un <div></div>
<input class="btn" type="button" value="Soy un <input>">
</div>
</body>
In < button > and < input >, text is align center of the button but in < a > and < div >, text is shown top of the button. I think < button > and < input > inherit some property and so they align text in the middle of button.
在 < button > 和 < input > 中，文本对齐按钮的中心，但在 < a > 和 < div > 中，文本显示在按钮的顶部。我认为 < button > 和 < input > 继承了一些属性，因此它们在按钮中间对齐文本。
I see this
我看到这个
and i want that all buttons align text in the middle.
我希望所有按钮都在中间对齐文本。
The class "btn" is this
“btn”类是这个
.btn{
display: inline-block;
padding: 4px 12px; /* Padding por defecto */
font-size: 16px; /* Tama?o fuente por defecto */
line-height: 20px; /* Tama?o de linea */
text-align: center;
vertical-align: middle;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
cursor: pointer;
height: 80px;
background-color: #f5f5f5; /* por si no se ve el gradiente, aunque si lo pruebo en Chrome nunca deberia verse este color*/
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
}
Any idea?
任何的想法？
回答by David says reinstate Monica
To vertically-centre the text of these elements, simply set the line-heightof the element's text equal to the heightof the element, and set box-sizingto border-box(in order that the heightof all elements are the same:
要使这些元素的文本垂直居中，只需将元素文本的 设置为line-height等于height元素的 ，并设置box-sizing为border-box（以便height所有元素的 都相同：
.btn {
/* other, unchanged, CSS */
line-height: 80px; /* <- changed this */
box-sizing: border-box; /* <- added this */
}
Obviously this does cause issues, should the text wrap to a second line.
显然，这确实会导致问题，如果文本换行到第二行。
回答by mrcat
it should be, simply: line-height: 0.25em;
它应该是，简单地： line-height: 0.25em;
回答by Chalist
I think create height with setting padding for aelement.
我认为通过为a元素设置填充来创建高度。
回答by Abhinav Jayaram
border: none;
outline: 0;
cursor: pointer;
text-decoration: none;
overflow: visible;
background: none;
padding:0 16px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #222
Hope this is helpful
希望这有帮助
回答by Saurav Das
Please removed the
padding:4px 12px;from the btn class
and set the
line-height:as per your requirement then the text should come in the center of the box.
请padding:4px 12px;从 btn 类中删除
并line-height:根据您的要求设置，
然后文本应位于框的中心。
回答by Ifch0o1
Remove this : height: 80px;
删除这个： height: 80px;
Your padding : padding: 4px 12px;
你的填充： padding: 4px 12px;
After you remove the height padding must be ~ padding: 30px 12px;
去掉高度填充后一定要~ padding: 30px 12px;
You must set the padding fine (based on your text height).
您必须很好地设置填充（根据您的文本高度）。
回答by Nitesh
Add a display:table-cell;for the .btn class.
display:table-cell;为 .btn 类添加一个。
like
喜欢
.btn{display:table-cell;}
This will create the vertical alignment for the Divas well as aelements having the class .btn.
Hope this helps.
这将为.btn 类Div以及a元素创建垂直对齐方式。希望这可以帮助。
回答by Nihal Sahu
vertical-align:center;
use that and it will work
使用它，它会起作用
