如何在自定义按钮中对齐中心文字？
Bae*_*Bae 11 html css html5 css3
我有这个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>
在<button>和<input>中,文本是按钮的对齐中心,但在<a>和<div>中,文本显示在按钮的顶部.我认为<button>和<input>继承了一些属性,因此它们在按钮中间对齐文本.
我明白了
我希望所有按钮在中间对齐文本.
班级"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;
}
任何的想法？
Dav*_*mas 15
要使这些元素的文本垂直居中,只需将line-height元素的文本设置为等于元素的文本height,并设置box-sizing为border-box(以使height所有元素的元素相同:
.btn {
/* other, unchanged, CSS */
line-height: 80px; /* <- changed this */
box-sizing: border-box; /* <- added this */
}
显然,如果文本换行到第二行,这确实会引起问题.