如何使用Flex实现图标与标题文本水平居中对齐

核心问题原因 #

原有代码使用float: right实现图标右对齐，导致图标脱离正常文档流，父级.title没有配置内部元素的垂直对齐规则，且40px高的图标远大于标题文字的行高，无法实现预期的居中对齐；加上实际项目使用的图标自带上下留白，会进一步放大视觉上图标偏下的问题。

解决方案 #

改用Flex布局控制标题容器的内部对齐，兼容性好且易维护，修改后的代码如下：

CSS代码 #

.accordion {
  background-color: #e5e9eb;
  height: 174px;
  max-width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;  
}

.title {
  font-size: 0.75rem;
  letter-spacing: 0.063rem;
  text-transform: uppercase;
  padding: 20px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon {
  background-color: red;
  height: 40px;
  width: 40px;
  margin-left: 12px;
  /* 实际图标有上下留白时可加下面这句微调，数值按需调整，负数向上偏移、正数向下偏移 */
  /* transform: translateY(-2px); */
}

.span {
  line-height: 1.25rem;
  padding: 0 24px;
  display: block;
  margin-top: 8px;
}

HTML代码 #

无需修改，和原有逻辑保持一致即可。

React + Styled Components适配 #

直接把上述修改后的CSS属性对应写到你封装的Accordion、Title、Icon样式组件中即可，布局逻辑完全通用。

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