用Flex实现个人设置行右侧箭头垂直居中，关键是将外层容器设为display: flex并添加align-items: center，使文字与箭头在交叉轴（垂直方向）自然居中；箭头元素需避免float、absolute或vertical-align等脱离文档流的样式。
用 Flex 实现个人设置行右侧箭头垂直居中，核心是让整行成为 flex 容器，再用 align-items: center 控制交叉轴（默认为垂直方向）对齐。箭头本身无需额外定位，只要不脱离文档流、不设浮动或绝对定位，就能自然随容器垂直居中。
设置父容器为 flex 并启用垂直居中
给包含文字和箭头的外层容器（如 <div> 或 <li>）添加以下样式：
- display: flex —— 启用弹性布局
- align-items: center —— 让所有直接子元素在垂直方向居中（主轴默认水平，交叉轴即垂直）
- 可选：justify-content: space-between 或 flex: 1 配合文字左对齐、箭头右对齐
确保箭头元素不破坏对齐逻辑
右侧箭头常用 <i>、<span> 或 <img>，需注意：
- 避免设置
vertical-align、float或position: absolute，否则会脱离 flex 对齐体系 - 若用图片，建议控制尺寸（如
width: 20px; height: 20px;），防止因原始尺寸过大导致容器高度异常 - 图标字体（如 iconfont）推荐用
font-size统一缩放，它天然支持 align-items:center 的垂直对齐
常见 HTML 结构与对应 CSS
示例结构：
<div class="setting-item"> <span class="label">个人资料</span> <i class="arrow-icon">></i> </div>
对应样式：
.setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 12px;
border-bottom: 1px solid #eee;
}
.label {
font-size: 16px;
color: #333;
}
.arrow-icon {
font-size: 18px;
color: #999;
}
响应式与兼容性提醒
在 H5 场景下需注意：
- iOS Safari 和 Android WebView 对 flex 支持良好，但低版本（如 iOS 9 以下）慎用
gap，可用margin替代间距 - 若整行高度由内容撑开（比如文字行高不一致），可在容器加
height: 44px或min-height: 44px确保对齐基准稳定 - 调试时打开浏览器开发者工具，勾选“Show flexbox overlay”，能直观看到主轴/交叉轴方向和对齐效果
