How to align an svg next to text in react

Question

I'm trying to align a Celcius sign SVG next to the temperature in the center of the parent div, but for some reason, I can't do it by using flexbox or block with vertical-align.

I tried searching the forum, youtube, etc.. with no luck.

I am either able to align them on the same line but they have huge margins between them, which "margin: 0" doesn't solve, or I am able to align them in the center but not on the same line. Any help would be appreciated!!

here is the best result I was able to get:

HTML:


  
    {apiCity ?
      
        {apiCity}
        October 26, 2021
      
      : ''
    }

    
      {!apiCity ? please enter your location:  : ''}
       :not(style)': { m: 1, width: '25ch' },
        }}
        noValidate
        autoComplete="off"
        onChange={handleChange}
        onSubmit={handleSubmit}

      >
        
      
      {temp ?
        
        : null}

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 (
        
            {temp}
            
        
    )
}

herrstrietzel · Accepted Answer

Pretty sure you're applyling too many display:flex css properties in your components – display:inline-block might be the better approach.

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

should rather be something like this:

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 is supposed to be applied to parent elements to distribute child elements within the parent's layout concept. When you apply it to every child node you'll actually forcing visual line breaks (unless you use 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;
}

SVG: Delete the width and height attribute in your svg but keep the viewBox attribute recommended whenever you want to inline svg – but keep your viewbox! (often ditched by svg optimizing services defaults)
CSS wrap your svg asset in a span/div with a css class like .svg-inline to provide a relative height

How to align an svg next to text in react

Answers (2)

Related Questions