垂直文本对齐在移动设备上不起作用

Question

所以基本上我面临的问题只存在于手机上，因为网站是完美的桌面上

这是我在手机上面对的截图

手机问题

桌面上没有问题

对于对齐自定义类，它包含一个具有重要和对齐项中心的flex

问题不只是在那个特定的方面，它遍布整个网站。

我尝试过的解决方案：

1. 尝试为所有a设置0的边距
2. 我使用的是cdn css，但用本地css替换了它
3. 为a设置特定的线高度
4. 填充以容纳它

这里是另一部分的另一个屏幕截图[相同的css文件]

另一部分截图

Iam使用：

bootstrap@4.6.0/dist/css/bootstrap。min.css

jQuery/2.1.3/jquery.min.js

bootstrap@4.6.0/dist/js/bootstrap。min.js

以前有没有人遇到过这个问题，或者有人找到了解决办法？

提前谢谢。

<div id="sidebar-wrapper">
        <ul class="sidebar-nav nav-pills nav-stacked" role="tablist">
            <li class="nav-item">
                <a class="nav-link active align-custom" data-toggle="tab" href="#premium-ranks" role="tab" aria-expanded="true">
                    <ion-icon name="diamond-outline" class="mx-4"></ion-icon>
                    Premium Ranks
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link align-custom" data-toggle="tab" href="#pets" role="tab" aria-expanded="false">
                    <ion-icon name="paw-outline" class="mx-4"></ion-icon>
                    Lovely Pets
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link align-custom" data-toggle="tab" href="#prison-ranks" role="tab">
                    <ion-icon name="skull-outline" class="mx-4"></ion-icon>
                    Prison Ranks
                </a>
            </li>
            <div id="#UserTab" class="d-flex mt-auto">
                <li class="nav-item">
                    <a class="nav-link align-custom" data-toggle="tab" href="#cart" role="tab">
                        <ion-icon name="cart-outline" class="mr-4"></ion-icon>
                        Cart
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link align-custom" data-toggle="tab" href="#b-credits" role="tab" aria-expanded="true">
                        <ion-icon name="cash-outline" class="mr-4"></ion-icon>
                        Credits
                    </a>

                </li>
                <li class="nav-item">
                    <a class="nav-link align-custom" data-toggle="tab" href="#my-orders" role="tab" aria-expanded="true">
                        <ion-icon name="person-outline" class="mr-4"></ion-icon>
                        My Orders
                    </a>

                </li>
            </div>
        </ul>

    </div>

Answer 1

检查代码后，您的问题不在于flex和alignment。

这就是你正在使用的字体系列：“塔贾瓦尔”！重要的 可能它有一些特殊的线条高度和垂直对齐我不是字体专家，请尝试将字体更改为不影响对齐的字体，尤其是这种字体的底部填充比顶部填充更多，因此句子在框中显示为未对齐。

原件：

删除字体后：

ps：你直接在图标旁边写内容，这会留下空白，在不同浏览器中可能表现不同，这不是一个好的做法。