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

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”元素，以使其显示在桌面和平板电脑以外的所有设备的中央？

Answer 1

像这样使用：

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

Answer 2

这样的事情，但如果你给小提琴的例子那就好了

#logo_and_search {
width:100%;
}

#logo {
display: block;
margin: 0 auto;
}

Answer 3

#logo {
    display: block;
    width:136px; /* the same as the logo*/
    margin: 0 auto;
}