[分享]css中 按键中字体位置

在 CSS 中，可以通过 textalign 属性来设置文本在容器中的对齐方式。但是，我们不仅需要控制文本的水平位置，还经常需要控制文本在按键中的垂直位置。在实际中，我们经常需要设置按键内字体的垂直居...

在 CSS 中，可以通过 text-align 属性来设置文本在容器中的对齐方式。但是，我们不仅需要控制文本的水平位置，还经常需要控制文本在按键中的垂直位置。

在实际中，我们经常需要设置按键内字体的垂直居中。 CSS 提供了多种方式来实现这一效果：

/* 方法一：使用 line-height 属性 */
.btn {
  height: 36px;
  line-height: 36px;
}

/* 方法二：使用 vertical-align 属性 */
.btn {
  height: 36px;
  vertical-align: middle;
}

/* 方法三：使用 padding 属性 */
.btn {
  height: 36px;
  padding: 10px 0;
}

这三种方式的区别在于，方法一设置的是行高，这意味着如果一个按键内有多行文本，每行文本都会垂直居中。方法二是设置元素与父元素的垂直对齐方式，即使元素内只有一行文本，也会垂直居中。方法三是通过设置内边距来使元素内的内容居中，可以灵活控制内边距的大小来适应不同的按键大小。

需要注意的是，在使用方法二时，需要保证父元素具有 display: table-cell; 属性，否则该属性无效。同时，如果按键内的内容是图片等非文本内容时，需要使用方法三。