Vertical aligning a text in a header in React

Question

I have a react header component that looks like this:

const Header = () => {
    return (
        <div className="navbar">
            <div className="logo-container">
                <img id='logo' alt='header-logo' src={Logo}/><span id="header-title">Dashboard</span>
            </div>
        </div>
    );
}

export default Header;

The stylesheet for this component looks like

.navbar {
    height: 4em;
    background-color: #f9f9f9;
    width: 100%;
    background: #00bceb;
  }

  #logo {
    margin-left: 2em
  }

  #header-title {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    color: #f9f9f9;
  }

(I'm hiding the logo)

The text is not middle aligned.

Any help?

Make logo-container a flexbox and set align-Items: 'center' – Harsh kurra Aug 13 '19 at 06:18 — Harsh kurra, Aug 13 '19 at 06:18

score 5 · Accepted Answer · answered Aug 13 '19 at 06:17

5

Try using Flexbox:

.logo-container {
   display:flex;
   align-items: center;
}

answered Aug 13 '19 at 06:17

Minal Chauhan

5,739
5
15
36

Wow that was simple. I thought using `align-items: center` would just align horizontally. Thanks – Dawn17 Aug 13 '19 at 06:18
@Dawn17 If this answer has helped you, please mark it as correct answer by clicking on the tick. – Gosi Aug 13 '19 at 07:13

Arvind yadav · Answer 2 · 2019-08-13T07:23:40.667

0

Use this css, it will work.

.navbar {
   display:flex;
   align-items: center;
}

edited Aug 13 '19 at 07:23

answered Aug 13 '19 at 06:40

Arvind yadav

77
9

Vertical aligning a text in a header in React

2 Answers2