How to center text vertically in Bootstrap's navbar-brand class?

Question

I have a logo with some text. I want the text to be vertically aligned to the middle.

<a class="navbar-brand" href="foo"><img src="bar"/>FooBar</a>

navbar-brand is defined in Bootstrap like that:

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

I've tried wrapping image together with text in span and set its style as follows:

vertical-align: middle; 
display: inline-block;

See JSFiddle

Could someone give me a hint, how should I center the text vertically?

Answer 1

Use following css:

#foo {
    align-items: center;
    display: flex;
}

Use display:flex instead of display:inline-block.

Working Fiddle