How to center the burger icon vertically in the navigation menu?

Question

I have a custom navigation menu that I would like to contain the website logo and a burger icon that show the navigation anchors on small screens , I'm using Media Queries , I want the burger icon to be centered vertically so that when I stretch the browser window it remains center as I'm being at the same media query .

Here is the html :

<div class="navbar">
  <a  href="#"><img class="navbar-brand" src="images/brand.png"/></a>
</div>
<label class="tog" for="toggle">&#9776;</label>
<input type="checkbox" id="toggle"></input>

The logo is left floated.

The CSS of the burger icon:

.tog  {
 display:block;  
 cursor:pointer;
 float:right;
 font-size:250%;
 max-width:100%;
 height:auto;
}

Answer 1

Seems you have done float right with your tog class so it has taken some space in right and due to this your icon shifted left. If possible then post one screenshot of your problem. It will let us know the exact problem you are facing there.