[分享]css中button文本居中对齐

在CSS中，按钮是一个常见的元素，但是文本居中对齐却是一个常见的问题。在这篇文章中，我们将讨论几种实现文本居中对齐的方法。 首先，我们可以通过设置lineheight属性和height属性来实现按钮中...

在CSS中，按钮是一个常见的元素，但是文本居中对齐却是一个常见的问题。在这篇文章中，我们将讨论几种实现文本居中对齐的方法。
首先，我们可以通过设置line-height属性和height属性来实现按钮中的文本垂直居中。例如：

button {
  line-height: 24px;
  height: 24px;
  text-align: center;
}

这将使按钮的高度为24px，文本居中显示。但是，这种方式只适用于固定高度的按钮。
其次，我们可以通过使用flexbox布局来实现按钮中的文本水平和垂直居中。例如：

button {
  display: flex;
  justify-content: center;
  align-items: center;
}

这将使按钮的文本水平和垂直居中，无论按钮的大小如何。
最后，我们可以使用伪元素来实现按钮中的文本水平和垂直居中。例如：

button {
  position: relative;
}
button:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
button span {
  display: inline-block;
  vertical-align: middle;
}

这将使按钮中的文本水平和垂直居中，同时保持按钮的大小和文本的对齐。
总之，在CSS中，我们有多种方法来实现按钮中的文本居中对齐。可以根据实际情况选择最适合的方法。