如何在同一班级中对齐徽标和文本？

Question

I am trying to get my text aligned with my logo in my header.

HTML:

<div class="haut" style="height:70px">
    <a href="{$mybb->settings['bburl']}" id="logo"><img style="vertical-align:middle" src="https://i.imgur.com/h6v1Xsm.png" /></i></i> PogWare</a>
    <span class="useroptions">
        <ul id="menu-deroulant">
            <li><a href="{$mybb->settings['bburl']}">Home</a></li>
            <li><a href="{$mybb->settings['bburl']}/memberlist.php">Members</a></li>
            <li><a href="{$mybb->settings['bburl']}/showteam.php">Team</a></li>
            <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Help</a></li>
            <li><a href="{$mybb->settings['bburl']}/search.php">Search</a></li>
            {$welcomeblock}
        </ul>
    </span>
</div>>

and I got this CSS:

#logo {
    color: #cc2e2e;
    padding: 15px 35px;
    top: 20px;
    font-family: 'myfont';
    font-size: 27px;
}

Answer 1

Try using Id

 #logo { img { vertical-align:middle } }

 <a href="{$mybb->settings['bburl']}" id="logo"><img style="vertical-align:middle" src="https://i.imgur.com/h6v1Xsm.png" /> PogWare</a>