jquery - Logo float 在标题上方或上方

Question

我正在尝试使用 HTML 和 CSS 为我的应用程序自定义 header 。我目前正在使用 jQuery UI 进行布局。我想做的是让 Logo 更适合我的 Web 应用程序。截至目前， Logo 与文本内嵌并自动调整标题大小，这是我不想要的。我想让 Logo 成为漂浮在标题上方(或上方)的单独实体。我认为这在 CSS 中是可行的，但不太确定如何实现。

<div class="ui-layout-north">
    <div class="container">
        <a href="#"><img class="logo" src="images/cal_fire_logo.gif"></a>
        Hi
    </div>
</div>

之前我尝试了以下 CSS 来尝试接近我打算做的事情，但它并没有完全实现我的希望:

 .ui-layout-north {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f6f6f6;
    z-index: 10000;
    height: 100px;
}

.ui-layout-north .logo {
    line-height: 100px;
}

.logo {
    position: absolute;
    margin: 0 50%;
    width: 150px;
    left: -75px;
    top: 50px;
    display: inline-block;
    height: 100px;
    z-index: 100000;
    margin: 0 auto;
}

如果你们中的任何人能提供帮助，那就太好了。 谢谢。

Answer 1

在您 Logo 的 CSS 上，您已经声明了两次 margin 。您最后的 margin 设置将覆盖您的第一个 margin 设置。不知道你所说的它消失在你的中心面板下是什么意思。我已经在 jsfiddle 上使用通用的 150 x 100 Logo 图片重新创建了您的代码，并且您的代码仅使用第一个 margin:0 50%; 。这是一个链接 http://jsfiddle.net/jaketaylor/1ut4ts76/ 让我知道您希望它看起来像什么而不是它看起来如何