如何移动按钮文本？ [复制]

【问题标题】：How to Move Button Text? [duplicate]如何移动按钮文本？ [复制]
【发布时间】：2019-12-03 22:05:17
【问题描述】：

默认情况下，按钮文本水平居中，垂直居中。如何将按钮文本垂直对齐到顶部？

我检查了元素，它有 0 填充。

垂直对齐：文本顶部；不工作。

【问题讨论】：

欢迎来到 SO。如果您使用您的实际代码创建一个 sn-p 以使人们更容易做出响应，那么您更有可能吸引更多的关注和回复您的问题。制作一个工作示例/小提琴会更好。
请使用tour 的help centre 来查看how to ask a good question。如果您不提供任何代码，我们将无法为您提供帮助 - 请参阅如何创建 minimal reproducible example

标签： html css

【解决方案1】：

这可以通过flexbox来完成。首先，您可以在包含文本的按钮内添加一个跨度：

<button>
  <span>text</span>
</button>

css 会是这样的：

button {
    display: flex;
    align-items: center; //For vertical alignment [all values: flex-start | flex-end | center | baseline | stretch]
    justify-content: center; //For horizontal alignment [all values: flex-start | flex-end | center | space-between | space-around | space-evenly]
}

您可以尝试在哪个位置显示您的文字。

【讨论】：