垂直对齐li中的文本

Question

我遇到一个小问题

    ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}

    ul#menu li a {
        background: none;
        color: #999;
        text-decoration: none;
        vertical-align:middle;
    }

    ul#menu li a:hover{
        color: #7ac0da;
        text-decoration: none;
    }

我要做的是，在li里面放一个SVG然后让文本以图像为中心而不是坐在它的底部。

<li><a href="~/"><img src="~/svg/iconmonstr-menu-6-icon.svg" height="30" width="30"/>Home</a></li>

Answer 1

将<ul>设置为垂直对齐到中间。

ul#menu li a img { vertical-align:middle; }