HTML：什么css属性在按钮"center"中制作内容？

Question

这是一个奇怪且并不重要的问题：
如果我在html中创建一个button标签，然后键入一些文本，例如"单击我"之类的内容

<button> Click me! </button>

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

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

"点击我！"这句话将自动出现在我的按钮中央。
我试了text-align:left;，单词会移动到左侧，
这意味着我禁用了它的地平线中心

但我不知道如何使它不是垂直中心？
放置元素垂直中心总是有一些解决方案来制作它(如之后/之前，弯曲，边距...等等)，但是今天我想使内容在按钮中不垂直居中，
我完全不知道如何更改其顶部和左侧。

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

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

Answer 1

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

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

您可以使用最小高度和填充底部

Answer 2

您可以通过向<button>标签添加<span>标签来执行此操作。我在下面添加了代码片段

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>