Bootstrap brand isn't centering vertically in navbar - html

Question

i'm having trouble centering my branding logo vertically in the center. As of right now my rendered html looks like this:
<a class='navbar-brand' href='#'>
<img alt="brand" height="200%" src="/assets/logo.png" />
If I don't set the height to a size, it will be the full size of the png. But my branding isn't vertically center with the rest of my navbar.
My css for the navbar-brand looks like this:
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
What do I need in my css to make this center with the navbar?
This is the full render of the navbar, pulled right from bootstrap docs.
<nav class='navbar navbar-default' role='navigation'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='#'>
<img alt="brand" height="200%" src="/assets/logo.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'>
<a href='#'>Link</a>
</li>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class='navbar-form navbar-left' role='search'>
<div class='form-group'>
<input class='form-control' placeholder='Search' type='text'>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->

Answer 1

You can try use absolute positioning:
.navbar-brand {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: // half the width of your img
}