咨询：React中图标无法垂直居中，设置vertical-align仍无效的原因

问题根源是.block容器没有定义内部元素的垂直对齐规则，wrapper的align-items: center仅作用于.block自身在父容器中的位置，不会影响.block内部的图标和文字布局。

推荐两种解决方式：

1. Flex布局方案（更通用）
   给.block.one添加flex属性，直接让内部元素垂直居中：

.block.one {
  display: flex;
  align-items: center;
  gap: 8px; /* 可选，为图标和文字添加间距 */
}

2. 行高+垂直对齐方案
   如果不想用flex，可以通过设置行高配合SVG的垂直对齐：

.block.one {
  line-height: 32px; /* 根据实际需求调整高度 */
}
.block.one svg {
  vertical-align: middle;
}

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