CODEWITHSUNDEEP
csstwitter-bootstrap
Arkadiusz Kałkus
Arkadiusz Kałkus

Reputation: 18363

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

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?

Upvotes: 5

Views: 8665

Answers (2)

tohood87
tohood87

Reputation: 728

If cross browser compatibility is a must for older browsers the display table approach might be worth looking at. Really liking the answer from Ketan though.

All that would be required is an additional tag around the text like so:

HTML:

<span id="foo">
      <img src="http://radiofair.eu/downloads/images/foobar.png"/>      
  <span>FooBar</span>
</span>

CSS:

#foo{
  display: table;
  color: red;  
}

#foo span{ 
  display:table-cell;
  vertical-align:middle;
}

Working Example

Upvotes: 1

ketan
ketan

Reputation: 19341

Use following css:

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

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

Working Fiddle

Upvotes: 11

Related Questions