Div将不会移动到它应该在的位置

我有一个div内的div，不会移动到我想要的中心位置。这就是所谓的youthcouncilDiv将不会移动到它应该在的位置

HTML

<div id="header"> 
    <img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Logo.png" id="logo"> 
    <img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Title.PNG" id="title"> 
    <img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil"> 
</div>

相应的CSS

#header { 
height: 100px; 
width: 2000px; 
background-color: #993333; 
margin-top: -10px; 
} 
#youthcouncil { 
height: 80px; 
width: 180px; 
margin-left: 300px; 
margin-top: 5px; 
} 
#logo { 
height: 80px; 
width: 180px; 
margin-left: 20px; 
margin-top: 5px; 
} 
#title { 
height: 80px; 
width: 180px; 
margin-left: 250px; 
margin-top: 5px; 
}

来源

2014-02-27 Edward Leonard

'保证金左：300像素;'有些事情真的错了 –

请分享预览或小提琴，以便我们可以看到问题 –

因此，您希望图像youthcouncil垂直居中与红色背景的div不正确？ –

修订

我去掉了一些零件给你，使之更容易看到它是如何工作的形象。现在你应该可以加回你的其他图像等

演示：http://jsfiddle.net/UKAEu/2/

HTML

<div id="header"> 
    <img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil" /> 
</div>

CSS

#header { 
    height: 100px; 
    width: 500px; 
    background-color: #993333; 
} 
#youthcouncil { 
    height: 80px; 
    width: 180px; 
    margin-top: 10px; 
    position: relative;   /* make it moveable */ 
    left: 50%;     /* push left edge to center */ 
    margin-left: -90px;   /* push back half its width */ 
}

来源

2014-02-27 19:43:45 LGSon

Div将不会移动到它应该在的位置

回答

相关问题