13

我有这个 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 &lt;button&gt;</button>
    <a class="btn" data-am-type="button">Soy un &lt;a&gt;</a>
    <div class="btn" data-am-type="button">Soy un &lt;div&gt;</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;
 }

任何想法？

4

8 回答 8

19

要使这些元素的文本垂直居中，只需将元素line-height文本height的box-sizingborder-boxheight

.btn {
    /* other, unchanged, CSS */
    line-height: 80px; /* <- changed this */
    box-sizing: border-box; /* <- added this */
}

JS 小提琴演示。

显然，如果文本换行到第二行，这确实会导致问题。

于 2013-05-21T10:21:48.790 回答
1

请 padding:4px 12px;从 .btn 类中删除并 line-height: 根据您的要求设置，然后文本将出现在框的中心。

于 2013-05-21T10:31:00.377 回答
0

a我认为通过为元素设置填充来创建高度。

于 2013-05-21T10:32:30.067 回答
0 
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

希望这会有所帮助

于 2013-05-21T10:49:48.757 回答
0

应该是，简单地说： line-height: 0.25em;

于 2016-04-12T13:24:24.600 回答
-1

为 .btn 类添加一个display:table-cell;。

喜欢

.btn{display:table-cell;}

这将为.btn 类Div以及具有类的元素创建垂直对齐方式。a希望这可以帮助。

于 2013-05-21T10:24:07.663 回答
-1

删除这个：height: 80px;

你的填充：padding: 4px 12px;

删除高度填充后必须〜padding: 30px 12px;

您必须将填充设置为精细（基于您的文本高度）。

于 2013-05-21T10:31:30.833 回答
-3 
vertical-align:center;

使用它，它会工作

于 2013-10-11T08:20:43.583 回答