如何在按钮中定位文本？答案

【问题标题】：How do I position the text in a button?如何在按钮中定位文本？
【发布时间】：2021-05-21 19:49:22
【问题描述】：

假设我有一个按钮：

HTML

<input type="button" class = "button" value="Click here"

CSS

.button {
  height: 300px;
  width: 300px;

这个按钮会很大，我不想把文本放在中间，我想把它放在中间顶部。我该怎么做？

【问题讨论】：

【解决方案1】：

不要使用heightwidth，而是使用padding

padding: 0px 150px 300px 150px;

【讨论】：

感谢您的提示，但是我的计划是将图像也放入按钮中，因此如果我输入您所说的内容，它将移动图像而不是图像。你能像下面的评论那样使用 text-align 和 line-height 吗？
如果你想把图片放到按钮上，那么就这样做padding: 0px 150px 300px 150px; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30876/css-button.png); background-repeat: no-repeat;

【解决方案2】：

你可以根据你给按钮的高度使用 text-align 和 line-height

【讨论】：

如何使用我的代码来实现它？如果我将其作为 html:
并将其作为 css .button {height: 300px;宽度：300 像素；行高：50 像素；文本对齐：中间；它什么也没做

【解决方案3】：

试试这个：

input {
    width: 300px;
    height: 300px;
    flex-direction: column;
    align-items: center;
 }

如果你想从顶部添加一些间隙，你可以添加 padding-top。

【讨论】：

【解决方案4】：

如果我正确理解您的问题，您可以对.button 使用 flex 规则。

.button {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 300px;
  width: 300px;
}

&lt;input type="button" class = "button" value="Click here"&gt;

【讨论】：

【解决方案5】：

我认为您可以添加一些填充以使文本更低

【讨论】：