Question

我正在尝试将按钮的文本垂直对齐到中心。我们在各种设备上使用 Bootstrap 按钮，它适用于所有设备，但在特定设备上不适用。

这是在 Chrome 和大多数设备上的样子：Chrome、Chrome DevTools

这就是我们设备上的样子：Device, Device DevTools

我们设备上的文本略高于中心对齐。我尝试过更改行高，使用 css reset、css normalize 并弄乱了其他一些 css 属性，但它们都不能使文本垂直居中。

这些是我们对按钮的覆盖

.btn {
  font-family: $open-sans;
  font-size: 14px;
  font-weight: bold;
  border-color: #cfcfcf;
  text-transform: uppercase;
  text-align: center !important;
}

按钮：

<button type="button" class="btn">Close</button>

我们还尝试使用 <a /> 和 <input> 标签，如在 docs 中所做的那样，但无济于事：

<a class="btn" role="button">Close</a>
<input class="btn" type="button" value="Close">

我看到两者之间的主要区别是元素内的文本（DevTools 中的蓝色位）在我们的设备中与顶部对齐，而在其他浏览器中则与元素的中心对齐，并且我不知道如何在两者之间进行标准化。

不确定它是否有帮助，但失败的目标设备使用 Android System WebView 74.0.3729.186。相当古老，但就是这样。

编辑：如果您查看 DevTools 图片，问题不在于将内容（内部蓝色框）与按钮的中心对齐，而是内容在按钮内正确居中。问题是文本在内容中没有正确居中。更改 line-height 属性没有任何作用，因为它仍然保持内容框内文本下方的间隙。

认为可能与字体内部填充过多有关，但更改了字体以获得相同的结果。

Answer 1

可能有两个问题：

padding-bottom：检查顶部和底部的填充是否相等。默认情况下，它应该是 padding: .375rem .75rem;。
line-height：检查是否为24px。您根本不需要拥有它，因为只有一行。设置line-height: 0

.btn {
  font-family: $open-sans;
  font-size: 14px;
  font-weight: bold;
  border-color: #cfcfcf;
  text-transform: uppercase;
  text-align: center !important;
  line-height: 0 !important; /* NEW */
}

如果不起作用，请使用这两个类。

d-flex：使其灵活
aling-items-center：将其内容垂直居中对齐。


<button type="button" class="btn d-flex aling-items-center">Close</button>

在按钮内垂直居中文本

1 个答案: