如何在导航菜单中垂直居中汉堡图标?

时间:2017-10-08 20:03:18

标签: html css css3 media-queries

我有一个自定义导航菜单,我想要包含网站徽标和汉堡图标,在小屏幕上显示导航锚点,我正在使用媒体查询,我希望汉堡图标垂直居中,以便我拉伸浏览器窗口它保持居中,因为我正处于相同的媒体查询。

这是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>

徽标悬空。

汉堡图标的CSS:

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

1 个答案:

答案 0 :(得分:0)

似乎你已经完成了你的tog类浮动,所以它占用了一些空间,因此你的图标向左移动了。 如果可能,请发布您问题的一个屏幕截图。它会让我们知道您面临的确切问题。