# F NAV - 移动端导航选项卡

**URL:** https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277
**Category:** Theme component
**Tags:** mobile
**Created:** [2024年十二月13日 13:12 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277 "2024-12-13T13:12:16Z")
**Posts on this page:** 1
**Showing post:** 70

<div class="post-metadata">

### Author: ![clacle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clacle/32/497163_2.png) [@clacle](https://meta.discourse.org/u/clacle)
#### Post date: [2025年六月26日 13:28 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/70 "2025-06-26T13:28:05Z")

</div>

> [@Don](#):
>
> 嗯，我无法重现这个…您使用什么设备和浏览器？

我使用了以下 CSS 来调整位置，效果相当不错。

```css
/* 使用 Flexbox 来居中 chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 确保容器具有定位上下文 */
}

/* 确保数字元素的样式不会干扰居中 */
.chat-channel-unread-indicator__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

```

---

_[View the full topic](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277)._