如何在反应中对齐文本旁边的 svg

Question

我正在尝试将摄氏度符号 SVG 与父级中心的温度对齐 div，但由于某些原因，我无法通过使用 flexbox 或块 vertical-align.

我尝试搜索论坛、youtube 等，但没有成功。

我可以将它们对齐在同一条线上，但它们之间有很大的边距，“边距：0”无法解决，或者我能够将它们对齐在中心但不在同一条线上。任何帮助将不胜感激！！

这是我能得到的最好结果：

HTML:

<div className={classes.App}>
  <div className={classNames(classes.Container, {
    [classes.Dark]: isDark,
    [classes.Light]: !isDark
  })} >
    {apiCity ?
      <div className={classes.Headers}>
        <h1>{apiCity}</h1>
        <p>October 26, 2021</p>
      </div>
      : ''
    }

    <div className={classes.Inner}>
      {!apiCity ? <p>please enter your location: </p> : ''}
      <Box
        component="form"
        sx={{
          '& > :not(style)': { m: 1, width: '25ch' },
        }}
        noValidate
        autoComplete="off"
        onChange={handleChange}
        onSubmit={handleSubmit}

      >
        <TextField id="outlined-basic" label="Location" variant="outlined" value={newCity} />
      </Box>
      {temp ?
        <Celcius temp={temp} classNameSpan={classes.Celcius} classNameSVG={classes.SVG} />
        : null}
    </div>
    <div className={classes.BottomMenu}></div>
  </div >
</div >

CSS:

    const styles = {
  App: {
    paddingTop: '2rem',
    display: 'flex',
    justifyContent: 'center',
  },
  Container: {
    height: '90vh',
    width: '80%',
    textAlign: 'center',
    borderRadius: '10px',
    color: '#FFFFFF',
    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
    borderRadius: '10px 10px 0px 0px',
    "& p": {
      filter: 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))',
    }
  },
  Headers: {
    filter: 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))',
    padding: 0,

    "& h1": {
      fontSize: '30px',
      fontStyle: 'normal',
      fontWeight: 500,
      marginTop: '2rem',
      marginBottom: '0px',
    },
    "& p": {
      fontSize: '15px',
      fontStyle: 'normal',
      fontWeight: 300,
      marginTop: '0px',
      marginBotom: '30px',
    }
  },
  Span: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',

    "&p": {
      display: 'flex',
      alignSelf: 'baseline',
      margin: 0
    },
  },
  SVG: {
    display: 'flex',
    transform: 'scale(0.1)',
    alignSelf: 'baseline',
    margin: 0
  }

SVG：

    const Celcius = ({ classNameSpan, classNameSVG, temp }) => {

    return (
        <span className={classNameSpan}>
            <p>{temp}</p>
            <svg className={classNameSVG} width="191" height="273" viewBox="0 0 191 273" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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>
    )
}

Answer 1

您可以将 svg 放在一个 span 中，放在 <p> 中，然后 space 相应地像这样...

  <p style={{textAlign: "center"}}>
    {temp}
    <span>
       <svg style={{marginLeft: "10px"}} className={classNameSVG} width="191" height="273" viewBox="0 0 191 273" fill="none" xmlns="http://www.w3.org/2000/svg">
            <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>
  </p>

Answer 2

很确定您在组件中应用了太多 display:flex css 属性 – display:inline-block 可能是更好的方法。

SVG: {
 display: 'flex',
 transform: 'scale(0.1)',
 alignSelf: 'baseline',
 margin: 0
}

应该是这样的：

SVG{
 display:inline-block;
 height:1em;
 line-height:1em;
 /* just for vertical alignment as svg don't have descenders like fonts */
 vertical-align:-0.2em;
 }

Flex 应该应用于父元素以在父元素的布局概念中分布子元素。当您将它应用于每个子节点时，您实际上会强制视觉换行（除非您使用 display: inline-flex ）。

.layout{
    width: 50%;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.svg-inline{
    height:1em;
}

.svg-inline svg{
    display:inline-block;
    height:1em;
    line-height:1em;
    /* just for vertical alignment */
    vertical-align:-0.2em;
}

.p-celsius{
    text-align:center;
}

<div class="layout">
    <p class="p-celsius">
    27.87
        <span class="svg-inline">
            <svg class="classNameSVG" viewBox="0 0 191 273" xmlns="http://www.w3.org/2000/svg">
                <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="#000" />
                <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="#000" />
            </svg>
        </span>
    </p>
    
    <p class="p-celsius">
        27.87 &deg;C
    </p>
</div>

SVG: 删除 svg 中的宽度和高度属性，但保留 viewBox 属性每当你想内联 svg 时推荐 - 但保留你的视图框！（通常被 svg 优化服务默认设置抛弃）
CSS 将您的 svg 资产包装在 span/div 中，并使用 css class 像 .svg-inline 来提供一个相对高度

如何在反应中对齐文本旁边的 svg

How to align an svg next to text in react

html

css

reactjs

flexbox

jss