Question

我正在尝试使用HTML和CSS为我的应用程序自定义标头。我目前正在使用jQuery UI进行布局。我想要做的是让徽标更适合我的网络应用程序。截至目前，徽标与文本内联并自动重新调整标题大小，这是我不想要的。我想让徽标成为浮动在标题上方（或上方）的独立实体。我认为它在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

在徽标的CSS上，您已经申报了两次保证金。您的上一个保证金设置将覆盖您的第一个保证金设置。不确定你的意思是它在你的中心面板下消失了。我在jsfiddle上重新创建了代码，其中包含一个通用的150 x 100徽标图片，而您的代码仅使用第一个margin:0 50%;。这是一个链接 http://jsfiddle.net/jaketaylor/1ut4ts76/ 让我知道你想要的样子而不是它的样子

徽标浮在标题上方或上方

1 个答案: