如何在导航栏中使汉堡图标居中响应？

Question

我试图将导航栏中的汉堡图标居中。 它有点以小型移动设备为中心，但当它涉及到平板电脑等更大的设备时，图标就会上升。 它不会保持居中。 我如何针对不同的屏幕响应地执行此操作？


<!DOCTYPE html>
<html>
<head>
<style>

.centerBurger {
    display: flex;
    justify-content: center;
}


.centerBurger {
    width: 100%;
    text-align: center;
}


.centerBurger {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 56.5%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
       height: 100%;
    width: 100%;
 
} 

.centerBurger  {
 display:block;  
 cursor:pointer;
 max-width:100%;
 height:auto;
}

.burgerCenter{
margin:0 auto;
 left: 50%;
 position: relative;
transform: translateX(-50%);
}


</head>
<body>
<!-- Top Navigation Menu -->
        <div class="topnav">
            
        <a href="index.html" class="active"><img src="header.png" width="25%"></a>
            
        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
            
            <a href="index.html">Startseite</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="leistungen.html">Leistungen</a>
            <a href="referenzen.html">Referenzen</a>
            <a href="kontakt.html">Kontakt</a>
            <a href="datenschutz.html">Datenschutz</a>
            
        </div>
            
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
        
        <a href="javascript:void(0);" class="icon centerBurger" onclick="myFunction()">
            
            
                
           <i class="fa fa-bars centerBurger"></i> 
            
        </a>
        </div>
        
                  <script>
          function myFunction() {
          var x = document.getElementById("myLinks");
          if (x.style.display === "block") {
              x.style.display = "none";
          } else {
              x.style.display = "block";
          }
          }
</script>
</body>
</html>

我试图以不同的方式将它居中。 这个css规则我一个一个的用了。 一次直接为属性，然后我给图标一个父 div，如下所示：

<div class="centerBurger">
a href="javascript:void(0);" class="icon" onclick="myFunction()">
            
            
                
           <i class="fa fa-bars"></i> 
</div>

并尝试将规则设置为父 div。 但遗憾的是它没有用。

我希望汉堡图标居中。 我对编码很陌生，我的英语也不是最好的。 所以我想先为此道歉。 如果有人能告诉我我的错是什么或者我该如何解决这个问题，我将不胜感激。

非常感谢你！

Answer 1

尝试以下操作：

<style type="text/css">
.topnav *:not(.centerBurger) { float: left; }
.topnav .centerBurger { display: block; width: fit-content;
                        margin-left: auto; margin-right: auto; }
.topnav #myLinks { display: none; }
</style>

第一条规则允许除.centerBurger之外的所有导航栏元素在导航栏中浮动（向左）。 没有它， .centerBurger将出现在<a href="index.html">下方的一行中。

第二条规则使.centerBurger成为导航栏中的居中块。 除了width: fit-content ，您还可以使用px中汉堡图像的宽度（我假设它是已知的）。

或者，尝试

<style type="text/css">
.topnav { text-align: center; }
.topnav *:not(.centerBurger) { float: left; }
.topnav #myLinks { display: none; }
</style>

Answer 2

添加对齐项目：居中； 到你的第一个。centerBurger

Answer 3

谢谢你回答我的问题。 我现在尝试了不同的可能性，最后我用 <img src="burgericon.svg> 替换了标签，现在它工作正常。代码现在看起来像这样：

´´´´
<div class="topnav">
            
        <a href="index.html" class="active"><img src="header.png" width="25%"></a>
            
        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
            
            <a href="index.html">Startseite</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="leistungen.html">Leistungen</a>
            <a href="referenzen.html">Referenzen</a>
            <a href="kontakt.html">Kontakt</a>
            <a href="datenschutz.html">Datenschutz</a>
            
        </div>
            
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
            
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            
            
          
           <img src="bars-svgrepo-com.svg" class="svg">
            
        </a>
            
        </div>

````

如何在导航栏中使汉堡图标居中响应？

问题描述

3 个解决方案

解决方案1
0 2022-12-17 12:54:13

解决方案2
0 2022-12-17 15:04:37

解决方案3
0 2022-12-18 11:42:07

如何在导航栏中使汉堡图标居中响应？

问题描述

3 个解决方案

解决方案1 0 2022-12-17 12:54:13

解决方案2 0 2022-12-17 15:04:37

解决方案3 0 2022-12-18 11:42:07

解决方案1
0 2022-12-17 12:54:13

解决方案2
0 2022-12-17 15:04:37

解决方案3
0 2022-12-18 11:42:07