Html 将图像放置在CSS框内容的顶部。_Html_Css

Html 将图像放置在CSS框内容的顶部。

html css

Html 将图像放置在CSS框内容的顶部。,html,css,Html,Css,我试图将我的徽标放在我在css中创建的菜单栏上方，但我尝试过的徽标总是放在菜单栏下方，我试图实现一个菜单栏的宽度，菜单栏的中心有一个徽标我的CSS代码是 #bar { margin-top:50px; width: 1920px center; height: 30px; background: #2E2E2E; border: 3px groove #FFD700; } #logo { background-image:url(../img/LOGO1.png); backgr

我试图将我的徽标放在我在css中创建的菜单栏上方，但我尝试过的徽标总是放在菜单栏下方，我试图实现一个菜单栏的宽度，菜单栏的中心有一个徽标

我的CSS代码是

#bar {  
margin-top:50px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3px groove #FFD700;   
}

#logo { 
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
}

html是

</head>
<body>
<div id="bar">
</div>
<div id="logo">
</div>
</body>
</html>

谢谢你的帮助

Z:index

是你的朋友吗

#bar{
边缘顶部：50px；
宽度：1920像素；
高度：30px；
背景色：#2e；
边框：3px槽#FFD700；
文本对齐：居中；
}
#标志{
位置：相对位置；
背景图片：url(http://placehold.it/150x150/f16b20/ffffff);
背景尺寸：150px；
宽度：150px；
高度：150像素；
保证金：0自动；
z指数：999；
顶部：0px；
}

希望这对您有用。

更改“left:”属性，直到它居中为止

#logo { 
position:absolute;
top:0;
left:45%;
right:0;
z-index:1000;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;

}以下是CSS：

#wrap {
    position:relative;
    width:100%;
}

#bar {  
    position:relative;    
    margin-top:50px;
    width: 100%;
    height: 30px;
    background-color: #2E2E2E;
    border: 3px groove #FFD700;   
}

#logo { 
    position:absolute;
    background-image:url(http://placehold.it/150x150/f16b20/ffffff);
    background-size:150px;
    width:150px;
    height:150px;
    left:50%;
    margin-left:-75px;
    margin-top:-50px;
    z-index:999;
    top:0px;
}

我放了一个包装，这样

#logo

在定位时会有一个父容器作为参考。这将标志在菜单栏中间浮动。< /P>

这是小提琴：

将徽标居中，检查小提琴徽标是否仍然未居中。您已经声明了两次

margin

，并且

auto

不适用于

绝对定位。我用正确的css更新了你的小提琴：完美！！非常感谢，我将在计时器后3分钟内收到您的帖子，感谢您的帮助您无需更改left
属性。将其设置为left:50%
，然后将margin left:
设置为一个负值，该值为正在居中的元素宽度的一半。在这种情况下：左边距：-75px
#logo { 
position:absolute;
top:0;
left:45%;
right:0;
z-index:1000;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;

#wrap {
    position:relative;
    width:100%;
}

#bar {  
    position:relative;    
    margin-top:50px;
    width: 100%;
    height: 30px;
    background-color: #2E2E2E;
    border: 3px groove #FFD700;   
}

#logo { 
    position:absolute;
    background-image:url(http://placehold.it/150x150/f16b20/ffffff);
    background-size:150px;
    width:150px;
    height:150px;
    left:50%;
    margin-left:-75px;
    margin-top:-50px;
    z-index:999;
    top:0px;
}