圖像粘在我的 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>