Question

我从左边滑入菜单。我给这个菜单的高度为100vh。我在里面放了一个带有一些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 tag to position：absolute with top：0，bottom：0，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%);
}

li标签中的垂直中心链接，即父级ul的11.11％高度

1 个答案: