jquery - li 标签中的垂直居中链接是父 ul 高度的 11.11%

Question

我有一个从左侧滑入的菜单。我给这个菜单设置了 100vh 的高度。我在里面放了一个 ul 和一些 li(菜单项)，每个 ul 占高度的 11.11%(有 9 个菜单项)。

现在，当鼠标悬停在上述那些菜单项上时，我还可以从左侧滑入子菜单。子菜单由一个带有 ul 和 li 的 div 组成。该 div 绝对定位，主 ul(上面提到)相对定位(以便每个子菜单出现在同一个地方)有点像这里显示的这个例子:

https://www.thecodingguys.net/demo/css/css-vertical-menu-multiple-levels.html

问题是我在子菜单中有链接，但我无法将它们垂直居中。不同之处在于，包含子菜单的 div 是主 ul(外部菜单)的 80%，内部 li 也是 ul 高度的 11.11%(也是 9 个子菜单项)。我尝试将 li 设置为 position: relative 并将 a 标签设置为 position: absolute with top: 0, bottom: 0, and margin: auto, 0 但这不起作用。这是子菜单的 css:

.menu-sub-categories {



    position: absolute;
    display: inline-block !important;
    height: 87%;
    z-index: -1;
    left: -100%;
    width: 100%;
    top: 23%;
    background: grey;
    @include prefix(transition, left 200ms ease-in);

    ul {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    li {
        display: inline-block;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #fff;
        height: 11.11%;
        //border: 2px solid red;



        a {
            color: #fff;
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            border: 2px solid green;
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 17px;
            position: relative;                 

            .text-wrap {    
                box-sizing: border-box;
                    display: inline-block;
                    height: auto;
                    width: auto;
                    top: 0;
                    bottom: 0;
                    margin: auto 0;


            }

            &:hover {
                color: #000;
                cursor: pointer;
                text-decoration: none;
            }
        }




    }





    }



}

这里是完整的网站，如果你想看的话:

http://pilot-mule-43300.bitballoon.com/

非常感谢

Answer 1

将此应用于您的 <span> <a> 内的标签

span {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}