如何垂直对齐div中的多个内联块元素？ （反应）

Question

我正在尝试垂直对齐div中的所有内容，这里是html：

  <div style={this.CookieBarStyle}>
    <div style={this.CookieBarTextStyle}>
      <img src={CookieIcon} style={{display: 'inline-block'}}></img>
      <p style={{width: '90%', marginLeft: '50px', display: 'inline-block'}}>Utilizamos cookies propias y de terceros para obtener datos estadísticos de la navegación de nuestros usuarios y mejorar nuestros servicios.
        <br></br>Si acepta o continúa navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información <a href="#" style={this.CookieBarLinkStyle}>aquí.</a></p>
    </div>
    <div style={this.CookieBarButtonsStyle}>
      <Button text="No Acepto" bgColor="#DEDEDE" textColor="#404040" onClick={Hola}></Button>
      <span style={{width: '43px', display: 'inline-block'}}></span>
      <Button text="Estoy de Acuerdo" bgColor="#57DE7F" textColor="#F6F6F6" onClick={Hola}></Button>
    </div>
  </div>

这是css（反应样式）：

this.CookieBarStyle = {
  backgroundColor: '#F6F6F6',
  color: '#404040',
  padding: '8px 15px',
  boxSizing: 'content-box'
}
this.CookieBarTextStyle = {
  display: 'inline-block',
  width: '65%',
  paddingLeft: '35px'
}
this.CookieBarButtonsStyle = {
  display: 'inline-block',
  width: '30%',
  textAlign: 'right'
}
this.CookieBarLinkStyle = {
  color: '#525AB5'
}

这是atm的屏幕截图：

基本上，所有内容都应垂直居中放置，即cookie，文本和按钮

Answer 1

在CookieBarStyle中，尝试添加以下内容：

display: 'flex',
alignItems: 'center',