# 导航菜单在移动设备上没有垂直居中

**URL:** https://meta.discourse.org/t/the-navigation-menu-is-not-vertically-centered-on-mobile/358592
**Category:** UX
**Tags:** mobile
**Created:** [2025年三月24日 14:09 UTC](https://meta.discourse.org/t/the-navigation-menu-is-not-vertically-centered-on-mobile/358592 "2025-03-24T14:09:20Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025年三月24日 14:09 UTC](https://meta.discourse.org/t/the-navigation-menu-is-not-vertically-centered-on-mobile/358592/1 "2025-03-24T14:09:20Z")

</div>

`#main-outlet` 的 `padding-top` 为 20px\[1\]:

 ![The image is a screenshot of issue tracking and support tickets on a platform called "#main-outlet." (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/6/4/2/6426bab1834a0cf9e4f9558467f7d1bb4fa5d395.png)

导航栏的下边距为 12px\[2\]:

 ![The image shows a hidden menu for an IsCourse navigation bar, displaying CSS properties and access settings. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/d/4/e/d4ea66305987e1a7b8cb405f534351689dd5003a.png)

结果是导航栏没有在标题和主内容之间垂直居中:

![image](https://global.discourse-cdn.com/meta/original/4X/8/3/5/83579d69149f722e70755f2ef7f638c217b0c251.png)

  

 ![The image depicts a screen capture of the'Isocourse' Discord server showing a stream of latest messages including support inquiries, plugin issues, and updates about features like a new composer and a topics voting system. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/b/1/1/b1168aa6f3b90b758016ffd1a51a967766216cd1.png)

我的建议是调整一些属性/值，使导航栏垂直居中:

 ![The image shows a list of discussions on the Isocourse website forum, including topics on sidebar issues, votes display improvements, email support, server maintenance, a new composer, and an introduction to DisCorkie. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/5/f/6/5f66e952169a89fa0db4432ebcb12ec3b4011eee.png)

* * *

1. [`1.25em`](https://github.com/discourse/discourse/blob/8c9885d0bf2c9bc26eac8a428ef03e9e8d2218e8/app/assets/stylesheets/mobile/discourse.scss#L122) 

2. [`var(--nav-space): 0.75em`](https://github.com/discourse/discourse/blob/8c9885d0bf2c9bc26eac8a428ef03e9e8d2218e8/app/assets/stylesheets/common/base/_topic-list.scss#L50)