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

Question

我有一个名为 SectionHeader 的反应组件，它只返回带有道具文本的自定义 header。 这是从渲染 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>

现在stroke.svg的高度仅为6px ，但宽度更长。 由于line-height是34px ，它被粘在 div header-text的底部，有点像这样：

_________ Header 文字 __________

我需要为两个img标签添加一个-10px的margin-top ，以便它有点像这样垂直居中：

--------- Header 文字 ---------

但它不起作用。

我试过的：

• 将所有三个子项包装在单独的div标记中，并将它们的display设置为inline-blocks并将header-text的display设置为block ，然后向包含img的div添加负边距。 （没有效果）
• 使用display:inline-block将道具文本包裹在div中，并为其添加正边距。 （这只是将所有 3 个孩子向下移动 10 像素）
• 用display:inline-block将两个img包裹在div中，并为其添加负边距。 （没有效果）

实现这一目标的正确方法是什么？

Answer 1

最简单的方法是 go 与 flex-box。 这是 CSS： display: flex; align-items: center display: flex; align-items: center 。 例如，您还必须将文本包装在像span这样的元素中

<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>