CSS对齐问题（float vs text-align）

Question

我正试图在我的论坛上放置3件事：左上角有一堆媒体链接，右上角有一个菜单栏，下面有一个徽标居中。

使用这种方法，我的localhost设置显示我想要的方式。但是，当我将它们上传到我的实时网站时，它看起来有所不同？不同之处在于徽标似乎“看到”媒体框作为其左边距，而离线则忽略它并以页面为中心。同样的浏览器，一切都是一样的，这就是它令人费解的原因。

#logo{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }


#brdmenu {
    display: inline-block;
    float: right;
}

#media {
    display: inline-block;
    float: left;
    padding: 10px 10px 0px 10px;
}

我希望这不是垃圾邮件，但可以在这里看到完整的CSS（以及它的外观）：www.strengthandfitness.co.uk

Answer 1

问题可能是#logo上缺少宽度。更新后的代码，适用于Chrome / FF：

#logo {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 650px;
}