How to vertical align several inline-block elements inside a div? (React)

Question

I'm trying to vertical align all the contents inside a div, here it's the 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>

Here's the css (React Styles):

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

Here's a screenshot of how it is looking atm:

Basically everything should be vertically centered, the cookies, the text and the buttons

Add `vertical-align: middle` to your inline-blocks? By default they have `baseline` — elveti, May 02 '19 at 12:18
you can also try flex property on CookieBarStyle. it works good — Sodhi saab, May 02 '19 at 12:23
Why not use `display:flex` along with `flex-direction:row` and `align-items:center` ? — k1dev, May 02 '19 at 12:34

score 0 · Answer 1 · answered May 02 '19 at 12:41

0

In the CookieBarStyle, try to add this:

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

answered May 02 '19 at 12:41

Rannie Aguilar Peralta

1,200
9
18

How to vertical align several inline-block elements inside a div? (React)

1 Answers1