图像粘在我的 React 组件中的 div 底部

Question

I have a react component called SectionHeader which just returns the custom header with props text. This is what is returned from inside the render function:

<div 
  id='header-text'
  style={{
    width:'100%',
    textAlign:'center',
    fontSize:'28px',
    lineHeight:'34px'
  }}
>
    <img src={require('./stroke.svg')} style={{marginRight:'50px'}} />
    {this.props.text}
    <img src={require('./stroke.svg')} style={{marginLeft:'50px'}} />
</div>

Now the stroke.svg is just 6px in height but longer in width. Since line-height is 34px it is stuck to the bottom of the div header-text somewhat like this:

_________ Header Text __________

I need to add a margin-top of -10px to both img tags so that it is somewhat vertically centered like this:

--------- Header Text ---------

But it doesn't work.

What I have tried:

• Wrap all three children inside separate div tags and set display for them as inline-blocks and set display of header-text to block , then add negative margin to the div s containing the img . (Has no effect)
• Wrap the prop text inside a div with display:inline-block and add positive margin to it. (This just shifts all 3 children down by 10px)
• Wrap both img s inside div s with display:inline-block and add negative margin to them. (Has no effect)

What is the right way to achieve this?

Answer 1

The easiest way would be to go with flex-box. Here is the CSS: display: flex; align-items: center display: flex; align-items: center . You would also have to wrap your text inside an element like a span for instance

<div 
  id='header-text'
  style={{
    width:'100%',
    textAlign:center,
    display: flex,
    alignItems: center,
    fontSize:'28px',
    lineHeight:'34px'
  }}
>
    <img src={require('./stroke.svg')} style={{marginRight:'50px'}} />
    <span>{this.props.text}</span>
    <img src={require('./stroke.svg')} style={{marginLeft:'50px'}} />
</div>