html - 如何在所有设备宽度的中心显示 Logo 图标？

Question

我的网站中有以下 Html 标记:

<div id="header">
    <div class="flyoutMenuButtons visible-phone">
        <a href="#navigation" class="open-menu"><i class="icon-reorder icon-3x"></i></a>
        <a href="#" class="close-menu"><i class="icon-reorder icon-3x"></i></a>
    </div>
    <div id="logo_and_search">
        <a id="logo" href="/" title="abc">
            <img src="abc.png" height="40" width="136">
        </a>                  
    </div>
</div>

我希望 Logo 显示在所有设备宽度的中心。我应该对“#logo”元素应用什么样式才能使其显示在桌面和平板电脑以外的所有设备的中心？

Answer 1

像这样使用:

a#logo{
display: block;
text-align: center;
}
a#logo img{
display: inline-block;
}