如何在按钮中定位文本？

Question

假设我有一个按钮：

HTML

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

CSS

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

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

Answer 1

而不是使用 height width，使用 padding

padding: 0px 150px 300px 150px;

Answer 2

您可以根据您给按钮的高度使用文本对齐和行高

Answer 3

试试这个：

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

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

Answer 4

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

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

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

Answer 5

我想你可以添加一些内边距使文本变小

How do I position the text in a button?