html - 垂直对齐图片和文字

Question

我试图让右侧的图片 (21x21px) 和文本 (14px) 垂直居中，但是一旦我将图片放入其中，<a>变大了..我怎样才能正确地做到这一点？

类“aPctr”只是给照片 21x21px

这是我的代码:https://jsfiddle.net/vc0h9Ldb/

    <div id="cssmenu">
    <ul class="_mrgA">
        <li>
            <a href="#">Home</a>
        </li>
        <li class="active has-sub">
            <span class="submenu-button"></span>
            <a href="#">Products</a>
            <ul>
                <li class="has-sub">
                    <span class="submenu-button"></span>
                    <a href="#">Product 1</a>
                    <ul>
                        <li>
                            <a href="#">Sub Product</a>
                        </li>
                        <li>
                            <a href="#">Sub Product</a>
                        </li>
                    </ul>
                </li>
                <li class="has-sub">
                    <span class="submenu-button"></span>
                    <a href="#">Product 2</a>
                    <ul>
                        <li>
                            <a href="#">Sub Product</a>
                        </li>
                        <li>
                            <a href="#">Sub Product</a>
                        </li>
                    </ul>
                </li>

            </ul>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
        <li class="account-lnk" style="float: right; height: 0;">
            <a href="#">
                <img src="img/autor.jpg" class="_aPctr">
                <span> Name</span>
            </a>
        </li>
    </ul>
</div>

Answer 1

请使用这个，它真的对你有帮助......

<li class="account-lnk" style="float: right; height: 0px; position: relative; display: table;">
<a href="#" style="padding: 14px 20px;">
<img class="_aPctr" src="img/autor.jpg" style="display: table-cell; vertical-align: middle;">
<span style="vertical-align: middle;"> Name</span>
</a>
</li>