在移动菜单的中心对齐中划线，单击点

Question

这是移动菜单→的HTML代码

   <a class="toggle-button">
                    <span class="minus minus-top"></span>
                    <span class="minus minus-middle"></span>
                    <span class="minus minus-bottom"></span>
   </a>

编写了很多 CSS，但这是可能影响→的主要 CSS

.clicked span.minus-middle{
  margin-left:-100px;
  opacity:0;
}
.toggle-button span.minus-top{
  top:-10px;
}
.toggle-button span.minus-bottom{
  bottom:-17px;
}

我的问题是我无法将其对齐在中心，无论徽标的大小如何，它都应该在中间垂直居中。

有一个属性→

vertical-align: middle

但我认为这只有在我们选择表格和表格单元格时才有效。你能找到我的菜单的修复程序吗？

浏览器测试的完整代码可以在这里找到→点击链接

Answer 1

将顶部：1px更改为25px，如下所示。

.toggle-button {
top:25px
}

或

 .toggle-button {margin-top: 50%;}

Answer 2

只需使用 html 就可以这样做

<a class="toggle-button">
    <center>
        <span class="minus minus-top">aa</span></br>
        <span class="minus minus-middle">aa</span></br>
        <span class="minus minus-bottom">aa</span></br>
    </center>
</a>

Answer 3

我真的不确定，但这能行得通吗：

margin-right: 45%

或者也许是：

<center></center>

但它被人瞧不起。