html - 无法垂直对齐

Question

您好，我正在尝试将文本“MyBrand”对齐到框的中间(以橙色 突出显示)。 但无法做到这一点。我试过使用“vertical-align: middle”。但这是行不通的。我在这里缺少什么？

CSS

header, nav, form, a, ul, li, form, img, input {
            padding: 0px;
            margin: 0px;
        }


        header {
            width: 980px; 
            background-color: #6C8DD5;
            margin-right: auto;
            margin-left: auto;
            font-family: "Helvetica Neue", Sentinal, sans-serif;
            padding-top: 7px;
            padding-bottom: 7px;
        }

        header nav {display: table;}
        header nav ul {display: table-row;} 
        header nav ul li {display: table-cell;}


        header nav ul img {
            width: 25px;
            height: 25px;
        }

HTML

<header role="banner">

    <nav role="navigation">
        <ul>
            <li id="logo">
                <a href="home.html"><img src="brand.jpg" /></a>
                <a href="home.html">MyBrand</a> 
            </li>

        </ul>
    </nav>

</header>

输出

Answer 1

DEMO

#logo a {
    display:inline-block;
    vertical-align:middle;
}