HTML：啥 css 属性使按钮“中心”中的内容？

Posted 2023-03-29

【中文标题】HTML：啥 css 属性使按钮“中心”中的内容？

【英文标题】：HTML: What css attribute makes content in button "center"?HTML：什么 css 属性使按钮“中心”中的内容？

【发布时间】：2017-05-06 17:50:24

【问题描述】：

这是一个奇怪但不那么重要的问题： 如果我在 html 中创建 button 标记，然后输入一些文本，例如“点击我”或其他内容

<button> Click me! </button>

然后用css给它width和height，比如：

.myBtn
    width:100px;
    height:100px;

“点击我！”将自动位于我按钮的中心。 我试过text-align:left;，字会移到左边， 这意味着我禁用了它的水平中心

但我不知道如何使它不垂直居中？ 将元素垂直居中放置总是有一些解决方案（例如之后/之前，flex，margin...等），但今天我想让内容不在按钮中垂直居中， 我完全不知道该怎么做，除非改变它的顶部和左侧。

有没有人知道我应该更改哪些属性才能使其不垂直居中？

顺便说一句，我只是想知道按钮具有哪些基本属性才能使其内容居中，而不是将内容放在按钮左上角的解决方案，所以请不要告诉我使用top，@987654330 @, calc 或其他计算改变内容位置的东西，那会很棒。

【问题讨论】：

这是<button> 在所有浏览器中的默认行为。您可以改用<span> 并设置类似按钮的样式。

我知道这是button 的默认属性，而这个问题正是在询问button 必须使其内容垂直居中的哪些默认属性。不询问将元素放在左上角的解决方案

What makes the text on a <button> element vertically centered?的可能重复

哇，我想是的，我稍后会检查它

【参考方案1】：

.myBtn
  width:100px;
  height: auto;
  padding-bottom:82px;
  min-height:100px;

<button class="myBtn"> Click me! </button>

你可以使用 min-height 和 padding-bottom

【讨论】：

我想我应该让我的“btw”更详细...使用填充来控制位置绝对就像使用 top 或 left 对我来说，这不是我想知道的，sor

【参考方案2】：

你可以通过在你的<button> 标签中添加一个<span> 标签来做到这一点。我在下面添加了sn-p

button
  width:100px;
  height:100px;
  

button > span 
    display: inline-block;
    vertical-align: top;


button:after 
    content: "";
    display: inline-block;
    vertical-align: top;
    height: 100%;

<button>
    <span> <!-- Added wrapper -->
        Click Me...!
    </span>
</button>

【讨论】：

我想我应该让我的“btw”更详细...使用填充来控制位置绝对就像使用 top 或 left 对我来说，这不是我想知道的，sor

这是另一种将元素置于顶部的方式，而不是按钮标签如何使其内容垂直居中的方式..