CSS 简单 CSS：文本无法在按钮中居中

在本文中，我们将介绍解决 CSS 中文本无法在按钮中居中的方法。

在开发网页时，经常需要使用按钮来引导用户进行交互。然而，有时我们会发现无论如何修改 CSS 样式，按钮中的文本都无法居中显示。接下来，我们将分享一些解决这个问题的方法。

阅读更多：CSS 教程

方法一：使用 Flexbox

Flexbox 是一种 CSS 布局模型，可以简化网页布局的编写。通过设置按钮的父元素为 Flexbox 容器，并对子元素应用一些属性，我们可以轻松实现文本在按钮中的居中显示。下面就是一个示例代码：

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 按钮所在容器的高度 */
}

.button {
  width: 150px;  /* 按钮的宽度 */
  height: 50px; /* 按钮的高度 */
  background-color: #00A8FF;
  color: white;
  text-align: center;
  line-height: 50px; /* 按钮中文本的行高 */
}
</style>

<div class="container">
  <button class="button">点击</button>
</div>

在上面的代码中，我们通过设置 .container 元素为 Flexbox 容器，并使用 justify-content: center 和 align-items: center 来实现按钮中文本水平和垂直居中。此外，我们还对按钮样式进行了设置，包括宽度、高度、背景色和字体颜色等。

方法二：使用表格布局

另一种解决文本无法居中的方法是使用表格布局。通过将按钮放置于一个表格单元格中，我们可以轻松实现文本在按钮中的居中显示。下面是一个示例代码：

<style>
.table {
  display: table;
  width: 100%;
  height: 200px; /* 表格的高度 */
}

.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.button {
  display: inline-block;
  width: 150px;  /* 按钮的宽度 */
  height: 50px; /* 按钮的高度 */
  background-color: #00A8FF;
  color: white;
}
</style>

<div class="table">
  <div class="cell">
    <button class="button">点击</button>
  </div>
</div>

在上面的代码中，我们使用 .table 元素来创建一个表格布局，并设置 .cell 元素为表格单元格。通过将按钮放置在 .cell 元素中，我们可以使用 vertical-align: middle 和 text-align: center 实现按钮中文本的垂直和水平居中。此外，我们还对按钮样式进行了设置，包括宽度、高度、背景色和字体颜色等。

方法三：使用绝对定位和负边距

另一个解决按钮文本无法居中显示的方法是使用绝对定位和负边距。通过设置按钮为相对定位，并将文本绝对定位居中，我们可以很容易地实现按钮中文本的居中显示。下面是一个示例代码：

<style>
.button {
  position: relative;
  width: 150px;  /* 按钮的宽度 */
  height: 50px; /* 按钮的高度 */
  background-color: #00A8FF;
  color: white;
}

.button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<button class="button"><span>点击</span></button>

在上面的代码中，我们使用 .button 类给按钮添加了相对定位，并设置了宽度、高度、背景色和字体颜色。同时，我们使用了 .button span 选择器来对按钮中的文本进行样式设置，通过绝对定位和负边距，将文本居中显示。