所以基本上我面临的问题只存在于移动设备上,因为该网站在桌面上是完美的
这是我在移动设备上遇到的屏幕截图
对于对齐自定义类,它包含一个具有重要和对齐元素中心的 Flex
问题不仅仅存在于该特定方面,而是整个网站。
我尝试过的解决方案:
- 尝试将所有 a 的边距设为 0
- 我使用的是 cdn css,但将其替换为本地 CSS
- 设置特定的行高
- 填充以容纳它
这是另一个部分中的另一个屏幕截图[相同的 css 文件]
我正在使用:
[email protected]/dist/css/bootstrap.min.css
jquery/2.1.3/jquery.min.js
[email protected]/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>
最佳答案
检查您的代码后,您的问题不在于 flex 和对齐。
它的字体您正在使用font-family: "Tajawal"!重要;
也许它有一些特殊的行高和垂直对齐我不是字体专家,尝试将字体更改为不影响对齐的字体,这种字体特别具有比顶部填充更多的底部填充,因此句子在其框中显示不对齐。
原文:
删除字体后:
ps:您直接在图标旁边编写内容,这会留下空白,这些空白可能在不同浏览器中表现不同,这不是一个好的做法。
关于css - 垂直文本对齐在移动设备上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67577697/