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

Posted 2023-02-22

技术标签:

【中文标题】如何在自定义按钮中对齐中心文本？【英文标题】：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的可能重复

【参考方案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;。

喜欢

.btndisplay: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.

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

【讨论】：

以上是关于如何在自定义按钮中对齐中心文本？的主要内容，如果未能解决你的问题，请参考以下文章

如何根据文本输入类型在自定义键盘中标记返回键

如何在自定义元素或按钮小部件上触发事件？

为什么在自定义交叉溶解segue中视图控制器的主视图不对齐？

如何在自定义 UITableView 中获取文本字段

如何在自定义单元格中同步选择文本视图的事件？

如何在自定义按钮颤动中给 onPressed 一个方法