垂直文本对齐不适用于移动设备

Question

所以基本上我面临的问题只存在于移动设备上，因为该网站在桌面设备上非常完美

这是我在移动设备上面对的屏幕截图

Problem on mobile

No problem on Desktop

对于对齐自定义 class 它包含一个带有重要对齐项目中心的 flex

问题不仅出在那个特定的方面，整个网站都有。

我试过的解决方案：

试图为所有 a
我使用的是 cdn css 但用本地的替换了它
为
填充以包含它

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

Another section screenshot

我正在使用：

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 和 alignement。

它是你正在使用的字体 font-family: "Tajawal" !important; 也许它有一些特殊的行高和垂直对齐 我不是字体专家，尝试将字体更改为不影响对齐的字体，这种字体的底部填充比顶部填充更多，因此句子在其框中显示未对齐。

原:

去掉字体后:

ps ：您正在直接在图标旁边编写内容，这会留下可能在跨浏览器中表现不同的空白，这不是一个好主意实践.

垂直文本对齐不适用于移动设备

Vertical text align not working on mobile

css

bootstrap-4

margin

vertical-alignment

text-alignment