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

用户体验
1

#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)
The image is a screenshot of issue tracking and support tickets on a platform called "#main-outlet." (Captioned by AI)387×860 68.6 KB

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

The image shows a hidden menu for an IsCourse navigation bar, displaying CSS properties and access settings. (Captioned by AI)
The image shows a hidden menu for an IsCourse navigation bar, displaying CSS properties and access settings. (Captioned by AI)387×860 68.7 KB

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

image


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)
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)387×860 77.6 KB

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

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)
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)387×860 78.3 KB

  1. 1.25em ↩︎

  2. var(--nav-space): 0.75em ↩︎