React中如何实现摄氏度SVG图标与温度文本并排居中对齐

问题根源 #

1. 你使用transform: scale(0.1)缩放SVG是核心诱因：transform属于视觉层面的变换，不会修改元素实际占据的文档流空间，你的SVG原始尺寸为191px*273px，缩放后视觉尺寸变小，但原有占位空间保持不变，因此会出现无法通过margin消除的巨大间距。
2. 外层flex容器设置了flex-wrap: wrap，在空间计算偏差时会自动换行，导致两个元素无法固定在同一行显示。

修复方案 #

1. 调整样式配置

删除SVG的transform缩放规则，直接通过CSS定义SVG的实际宽高，同时简化flex容器的对齐规则，修改后的样式如下：

const styles = {
  // 其余原有样式保持不变
  Span: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap', // 禁止自动换行，保证元素始终在同一行
    justifyContent: 'center',
    alignItems: 'center', // 两个元素垂直居中对齐，要对齐文字基线可改成 baseline
    gap: '4px', // 自定义温度数值和摄氏度符号的间距
    "& p": {
      margin: 0,
      fontSize: '32px' // 可根据需求调整温度数值大小
    },
  },
  SVG: {
    width: '20px', // 直接定义SVG实际尺寸，按需调整
    height: '20px',
  }
}

2. 可选优化

你可以将Celcius组件里包裹温度的<p>标签替换为<span>，避免块级元素的默认样式带来的潜在冲突，修改后的组件代码如下：

const Celcius = ({ classNameSpan, classNameSVG, temp }) => {
    return (
        <span className={classNameSpan}>
            <span>{temp}</span>
            <svg className={classNameSVG} width="191" height="273" viewBox="0 0 191 273" fill="none" xmlns="http://www.w3.org/2000/svg">
                {/* 原有path内容保持不变 */}
                <path d="M166.8 89C162.8 83.8 157.733 79.8 151.6 77C145.467 74.2 139.133 72.8 132.6 72.8C124.6 72.8 117.333 74.3333 110.8 77.4C104.4 80.3333 98.8667 84.4 94.2 89.6C89.6667 94.8 86.1333 100.933 83.6 108C81.0667 114.933 79.8 122.4 79.8 130.4C79.8 137.867 81 144.933 83.4 151.6C85.8 158.267 89.2667 164.133 93.8 169.2C98.3333 174.267 103.867 178.267 110.4 181.2C116.933 184.133 124.333 185.6 132.6 185.6C140.733 185.6 147.867 183.933 154 180.6C160.133 177.267 165.333 172.6 169.6 166.6L185.8 178.8C184.733 180.267 182.867 182.4 180.2 185.2C177.533 187.867 174 190.6 169.6 193.4C165.2 196.067 159.867 198.4 153.6 200.4C147.467 202.533 140.333 203.6 132.2 203.6C121 203.6 110.867 201.467 101.8 197.2C92.8667 192.933 85.2 187.333 78.8 180.4C72.5333 173.467 67.7333 165.667 64.4 157C61.0667 148.2 59.4 139.333 59.4 130.4C59.4 119.467 61.2 109.4 64.8 100.2C68.4 90.8667 73.4 82.8667 79.8 76.2C86.3333 69.4 94.1333 64.1333 103.2 60.4C112.267 56.6667 122.267 54.8 133.2 54.8C142.533 54.8 151.667 56.6 160.6 60.2C169.667 63.8 177.067 69.3333 182.8 76.8L166.8 89Z" fill="white" />
                <path d="M24.72 96.02C17.22 96.02 11.58 89.96 11.58 82.28C11.58 74.6 17.22 68.54 24.72 68.54C32.22 68.54 37.86 74.6 37.86 82.28C37.86 89.96 32.22 96.02 24.72 96.02ZM24.72 104.66C37.62 104.66 47.4 94.94 47.4 82.28C47.4 69.62 37.62 59.9 24.72 59.9C11.82 59.9 2.04 69.62 2.04 82.28C2.04 94.94 11.82 104.66 24.72 104.66Z" fill="white" />
            </svg>
        </span>
    )
}

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