网站导航栏文字垂直居中实现方案及优化建议

问题描述 #

我编写了网站导航栏的HTML和CSS代码，目前导航文字位于导航栏顶部，想实现文字垂直居中，请问该如何操作？另外还有哪些优化建议？

我的代码如下：

CSS

nav ul {
     background-color: #6699CC;
     height: 100px;
     margin: 0;
     padding: 0;
     position: -webkit-sticky;
     position: sticky;
     width: 100%;
 }
 nav ul li {
     display: inline;
 }
 nav ul li a {
     color: white;
     font-size: 35px;
     text-decoration: none;
     margin: 80px;
     padding-top: 25px;
 }
 nav ul li a:hover {
     background-color: #003B6D;
 }

HTML

<ul>
     <li><a href="index2.html">Home</a> &nbsp; &nbsp;</li>
     <li><a href="hardware.html">Computer Hardware</a> &nbsp; &nbsp;</li>
     <li><a href="software.html">Computer Software</a> &nbsp; &nbsp;</li>               
     <li><a href="internet.html">The Internet</a> &nbsp; &nbsp;</li>
 </ul>

一、实现文字垂直居中的方法 #

推荐用Flex布局，这是现代CSS中最简洁可靠的垂直居中方案，同时还能轻松控制导航项的间距：

修改后的CSS代码：

nav ul {
     background-color: #6699CC;
     height: 100px;
     margin: 0;
     padding: 0 20px; /* 左右加内边距，避免内容贴边 */
     position: -webkit-sticky;
     position: sticky;
     width: 100%;
     display: flex; /* 开启flex布局 */
     align-items: center; /* 垂直居中 */
     justify-content: space-around; /* 导航项均匀分布，也可以用gap控制间距 */
     box-sizing: border-box; /* 避免width:100%加padding导致溢出 */
 }
 nav ul li {
     list-style: none; /* 去掉默认列表圆点 */
 }
 nav ul li a {
     color: white;
     font-size: 35px;
     text-decoration: none;
     padding: 0 15px; /* 给链接加左右内边距，扩大点击区域 */
     line-height: 100px; /* 让链接高度和导航栏一致，hover时背景铺满垂直区域 */
 }
 nav ul li a:hover {
     background-color: #003B6D;
 }

如果不想用Flex，也可以用行高法：
给nav ul添加line-height: 100px;（和导航栏高度一致），同时把nav ul li a改成display: inline-block;，这样文字就能垂直居中，hover背景也能铺满垂直区域：

nav ul {
     /* 原有样式 */
     line-height: 100px;
 }
 nav ul li a {
     /* 原有样式 */
     display: inline-block;
     height: 100px;
     padding-top: 0; /* 去掉原来的padding-top */
 }

二、优化建议 #

• 移除HTML中的 ：用CSS控制间距更规范，比如Flex布局里的justify-content: space-around，或者给li加margin: 0 20px;，避免硬编码空格。
• 完善语义化结构：把<ul>包裹在<nav>标签里，符合HTML5语义化标准，帮助搜索引擎和屏幕阅读器识别导航区域。
• 优化hover交互：将链接设置为inline-block并添加合适的内边距，扩大点击热区，提升用户体验，同时hover时背景色能铺满导航栏高度。
• 响应式适配：小屏幕下导航项可能会溢出，可添加媒体查询，在移动端将导航栏改为垂直排列，或者切换为汉堡菜单。
• 使用相对单位：把字体大小的px改成rem，比如font-size: 2.1875rem;（等于35px，基于16px基准），适配不同设备的字体缩放设置。
• 添加z-index：给nav ul加上z-index: 999;，避免页面其他元素（如轮播图、弹窗）覆盖导航栏。
• 重置默认样式：给li添加list-style: none;，移除默认的列表圆点，让导航更整洁。

内容的提问来源于stack exchange，提问作者Goju Noah