文本对齐在移动设备上不起作用 [CSS]

Question

我遇到了一个以前从未遇到过的奇怪的文本对齐问题。

在此应用上：https://damdafayton-countries.herokuapp.com/ 两部分文本在移动浏览器中未居中对齐。

And here is the view from android virtual device. 我在移动设备上看到了相同的视图 phone。

为了修改 UI，我确实调整了上述文本的 line-height，并做了 vertical-align:sub。这修复了移动设备上的视图，但您可以看到它不在桌面浏览器的中间。

但下面的文字既不回应 line-height 也不回应 vertical-align。

我从来没有遇到过这样的文本对齐问题，几乎是零进度。可能我遗漏了一些重要的东西。

第一篇文章

<div className="text-center">
<NavLink to="/" className="text-white hover-1">HOME</NavLink>
</div>

第二个文本

<div className="bg-info py-2">
  <h2 className="fs-6 px-2 mb-0 flex-grow-1">
    {title}
  </h2>
</div>

编辑：我已经撤销了修正案；目前在桌面上查看它应该是怎样的，在移动设备上两个文本都没有对齐。

Answer 1

不确定我理解你的问题，但如果你说的标题不是垂直对齐的，那是因为你的字体“Gill,sans-serif” 有时某些字体会改变垂直起点

Text alignment doesnt work on mobile [CSS]