如何实现导航下拉菜单内a标签文本垂直居中

方法1：Flex布局实现（推荐，自适应高度） #

直接给下拉列表项.navDropItem添加flex布局相关属性即可实现内部a标签垂直居中，你可以直接替换原来的.navDropList .navDropItem规则：

.navDropList .navDropItem{
    margin-top: 10px;
    background-color: red;
    width: 100%;
    list-style: none;
    /* 新增以下属性 */
    display: flex;
    align-items: center; /* 实现垂直居中 */
    justify-content: center; /* 可选：需要水平居中就保留这行 */
    padding: 8px 0; /* 可选：增加上下内边距调整列表项高度，可根据需求修改数值 */
}

如果需要a标签的点击区域覆盖整个红色列表项，额外给.dropTag添加width: 100%; text-align: center;即可。

方法2：固定行高实现（适合固定高度的列表项） #

如果你提前确定了列表项的固定高度，直接把行高设置为和高度一致即可实现垂直居中：

.navDropList .navDropItem{
    margin-top: 10px;
    background-color: red;
    width: 100%;
    list-style: none;
    height: 40px; /* 自定义列表项高度 */
    line-height: 40px; /* 和高度值保持一致即可实现垂直居中 */
    text-align: center; /* 可选：需要水平居中就保留这行 */
}

冗余代码清理提示 #

你现有CSS中.navList .navTag:hover .navDropList这条规则是无效的，因为下拉容器.navDropList是.navListItem的直接子元素，不是.navTag的子元素，实际触发下拉的有效规则是后续的.navList .navListItem:hover .navDropList，无效规则可以直接删除避免样式冲突。

内容的提问来源于stack exchange，提问作者Nick Johnson