在前端页面开发中，导航栏是几乎所有网站都会用到的组件，实际开发过程中经常会遇到需要将导航栏内的列表项靠右对齐，同时让这些列表项在导航栏高度范围内垂直居中的需求，不同的布局方式实现该效果的代码逻辑和兼容性存在差异，下面逐一介绍可行的实现方案。
方法一：使用flex布局实现
flex布局是目前前端开发中最主流的布局方式，代码简洁且兼容性较好，适合大多数现代浏览器场景。只需要给导航栏的容器设置flex相关属性，即可快速实现列表项右对齐和垂直居中的效果。
/* 导航栏容器样式 */
.nav-container {
display: flex;
/* 让子元素垂直居中 */
align-items: center;
/* 让子元素靠右对齐 */
justify-content: flex-end;
height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
list-style: none;
}
/* 列表项样式 */
.nav-item {
margin-left: 20px;
font-size: 14px;
color: #333;
}
对应的HTML结构如下：
<ul class="nav-container">
<li class="nav-item">首页</li>
<li class="nav-item">产品</li>
<li class="nav-item">关于我们</li>
<li class="nav-item">联系我们</li>
</ul>
方法二：使用浮动加行高实现
如果需要兼容较老的浏览器，比如IE9及以下版本，flex布局可能无法正常使用，此时可以选择浮动加行高的传统实现方式。这种方式通过将列表项浮动到右侧，再设置导航栏容器的行高等于容器高度，实现垂直居中效果。
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 导航栏容器样式 */
.nav-container {
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
list-style: none;
overflow: hidden;
}
/* 列表项右浮动 */
.nav-item {
float: right;
margin-left: 20px;
font-size: 14px;
color: #333;
}
该方法的HTML结构和flex布局的示例一致，只需要替换对应的CSS样式即可。不过需要注意，浮动布局需要手动清除浮动，避免影响后续元素的排列，示例中通过给容器设置overflow: hidden实现清除浮动的效果。
方法三：使用定位布局实现
如果导航栏容器的高度固定，也可以使用定位的方式实现该效果。通过将列表项设置为绝对定位，调整右侧偏移量和垂直方向的位置，实现右对齐和垂直居中。
/* 导航栏容器样式，设置为相对定位 */
.nav-container {
position: relative;
height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
list-style: none;
}
/* 列表项容器定位到右侧 */
.nav-list {
position: absolute;
right: 20px;
/* 垂直居中：top50%加上自身高度一半的负margin */
top: 50%;
transform: translateY(-50%);
display: flex;
list-style: none;
}
/* 列表项样式 */
.nav-item {
margin-left: 20px;
font-size: 14px;
color: #333;
}
对应的HTML结构需要调整，增加一个列表项的外层容器：
<ul class="nav-container">
<ul class="nav-list">
<li class="nav-item">首页</li>
<li class="nav-item">产品</li>
<li class="nav-item">关于我们</li>
<li class="nav-item">联系我们</li>
</ul>
</ul>
不同方案的选择建议
如果项目不需要兼容太老的浏览器，优先选择flex布局方案，代码简洁维护成本低；如果需要兼容IE9及以下版本，可以选择浮动加行高的方案；如果导航栏有特殊的定位需求，比如需要覆盖在其他元素上方，可以选择定位布局方案。开发者可以根据实际项目的兼容性和需求场景选择最合适的实现方式。