如何在自定义按钮中居中文本？ [英] How align center text in custom buttons?
问题描述
我有这个html
< head>
< title> HTML5应用程式< / title>
< link rel =stylesheettype =text / csshref =css / custom.css>
< link rel =stylesheettype =text / csshref =css / buttons.css>
< / head>
< body>
<！ - Estructura - >
< div id =botones>
< button class =btndata-am-type =button>大豆un& lt; button& gt;< / button>
< a class =btndata-am-type =button>大豆un& lt; a& gt;< / a>
< div class =btndata-am-type =button>大豆un& lt; div& gt;< / div>
< input class =btntype =buttonvalue =Soy un< input>>
< / div>
< / body>
按钮>输入>，文本是按钮的对齐中心， a>和< div>，文本显示在按钮的顶部。我认为，按钮>
我看到这个
img src =https://i.stack.imgur.com/wLPiA.pngalt =pic>
我希望所有按钮对齐文字中间。
类别btn是
。 btn {
display：inline-block;
padding：4px 12px; / * Padding por defecto * /
font-size：16px; / *Tamañofuente por defecto * /
line-height：20px; / *Tamañode linea * /
text-align：center;
vertical-align：middle;
font-family：'Helvetica Neue'，Helvetica，Arial，sans-serif;
cursor：pointer;
height：80px;
background-color：＃f5f5f5; / * b $ b背景图像：-webkit-gradient（线性，0 0，0 100％，from（#ffffff） ，〜（＃e6e6e6））;
border：1px solid #cccccc;
-webkit-border-radius：4px;任何想法？ h2_lin>解决方案要将这些元素的文本垂直居中，只需将元素文本的 line-height 设置为< c $ c> 到 border-box >（为了使所有元素的 height 相同：
.btn {
/ *其他，没有变化，CSS * /
line-height：80px; / * < - 改变这个* /
box-sizing：border-box; / * < - 添加此* /
}
显然这会导致问题，如果文本换行第二行。
I have this 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.
I see this
and i want that all buttons align text in the middle.
The class "btn" is this
.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?
解决方案 To vertically-centre the text of these elements, simply set the line-height of the element's text equal to the height of the element, and set box-sizing to border-box (in order that the height of all elements are the same:
.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.
这篇关于如何在自定义按钮中居中文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
