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

标签 html css media-queries

我有一个自定义导航菜单,我想包含网站 Logo 和一个在小屏幕上显示导航 anchor 的汉堡图标,我正在使用媒体查询,我希望汉堡图标垂直居中,以便当我拉伸(stretch)浏览器窗口,它仍然居中,因为我正在处理相同的媒体查询。

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

Logo 保持 float 。

汉堡图标的 CSS:

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

最佳答案

似乎您已经将 tog 类向右浮动,因此它在右侧占用了一些空间,因此您的图标向左移动。 如果可能,请张贴您的问题的屏幕截图。它会让我们知道您在那里面临的确切问题。

关于html - 如何在导航菜单中垂直居中汉堡图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46635481/

相关文章:

html - Bootstrap 在点击时折叠导航栏

iphone - iPhone 上的 CSS 媒体查询

html - 无法选择html文本

javascript - 制作类似facebook的悬停弹出框效果

javascript - JS 和 CSS 未加载。文件似乎是空的

html - @media print 打印不正确

gwt - CSS:z-index 不适用于 Google Chrome 中的 SPAN

javascript - 可以禁用@media 查询或强制解决?原因 : Allow an iphone to see the desktop site?

html - NSURLRequest/URLWithString 未加载整个网页文本

html - 我怎样才能用 css 复制它?