如何在自定义按钮中对齐中心文本？答案

【问题标题】：How align center text in custom buttons?如何在自定义按钮中对齐中心文本？
【发布时间】：2013-05-16 01:47:21
【问题描述】：

我有这个 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's text vertical align的可能重复

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

希望对你有帮助

【讨论】：

【解决方案4】：

vertical-align:center;

使用它，它会起作用

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

删除这个：height: 80px;

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

删除后的高度填充必须是~padding: 30px 12px;

您必须正确设置填充（基于您的文本高度）。

【讨论】：

【解决方案7】：

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

喜欢

.btn{display:table-cell;}

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

【讨论】：

IE7 或更低？ IE7 或更低版本不支持标签按钮本身。可能你忘了提到这一点。正确的？ - @chalist
你也忽略了sn-p的一个重要点。即标题标签。它提到了HTML5 App。 HTML5。您可以写信给提出此问题的用户并说“IE7 或更低版本不支持”。正确的？ - @chalist

【解决方案8】：

要使这些元素的文本垂直居中，只需将元素文本的line-height 设置为等于元素的height，并将box-sizing 设置为border-box（以便height所有元素都相同：

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

JS Fiddle demo.

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

【讨论】：