我有这个 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>  <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> 在和中，文本与按钮居中对齐，但在和中，文本显示在按钮的顶部。我认为和继承了一些属性，所以它们在按钮中间对齐文本。我看到这个我希望所有按钮都在中间对齐文本。 “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; } 任何的想法？原文由 Bae 发布，翻译遵循 CC BY-SA 4.0 许可协议

请从 .btn 类中删除 padding:4px 12px; line-height: ，然后文本将出现在框的中央。原文由 Saurav Das 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

<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>  <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>

.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; }

要使这些元素的文本垂直居中，只需将元素文本的 line-height 设置为等于元素的 height ，并将 box-sizing -c8c9faed border-box 7 设置为 –165a727469308e90f1f-c8c9faed- --- （为了使所有元素的 height 相同：

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

JS 小提琴演示。

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

原文由 David Thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

Stack Overflow 翻译