css在图像上的相对对齐

我想对齐我的图像上的div。水平对齐工作正常，但垂直偏移不。此外，#studentenlijn的背景颜色不适用。css在图像上的相对对齐

HTML摘录：

<div id="container"> 
    <div id="studentenlijn">STUDENTENLIJN</div> 
    <img src="http://lsvb.nl/s/lsvbheader.jpg" class="banner" /> 
</div>

相关CSS

#studentenlijn { 
    width: 10%; 
    height: 10%; 
    position: absolute; 
    top: 30%; 
    left: 72%; 
    background-color: #660000; 
}

的jsfiddle：http://jsfiddle.net/YGeLA/

任何想法？

来源

2014-05-19 Doran

对不起设置高度像素！我试过了，但看起来很乱。将再试一次！ – Doran

背景颜色不起作用，因为'height'和'width'是'0'。它们在'％'中设置，父项在'％'中设置。 'body'和'html'虽然没有设置'height'和'width'，所以'％'没有做任何事情。 –

@Doran为'＃studentenlijn'添加填充或将高度和宽度设置为px/em以解决bg颜色问题。 –

当您尝试指定百分比高度时，身体的高度为0，从而影响其中容器的高度。另一个问题是，你的容器div中有一个浮动图像，因此你需要隐藏溢出以便容器正确计算其内的元素高度。

我已经对你的小提琴这里一些细微的变化：

http://jsfiddle.net/YGeLA/1/

我说：

height: 100%;到body元素
overflow: hidden;到#container迫使容器尊重它内的所有元素的高度。

来源

2014-05-19 15:36:26 Marc

太棒了！谢谢你们！添加填充和溢出固定它 – Doran

您的div的尺寸是：

#studentenlijn { 
width: 10%; 
height: 10%; 
}

所以这将是父元素％。父元素，即您的容器是：

#container { 
width: 100%; 
height: 100%; 
}

此时，您的浏览器无法确定哪个大小应该包含您的区块。所以你不能居中它（因为你不能居中一个没有浏览器确定大小的元素）。出于同样的原因，您看不到背景颜色。它是应用的，但你不会看到你的彩色块，因为他的大小为0.

试着解决它，并且它会更容易地居中你的div。如果它不帮你，修改你的文章:)

来源

2014-05-19 15:37:01

它不能的原因是因为'html'和'body'没有大小。如果添加了，那么将所有内容设置为'％'都可以。 –

任何父元素必须具有指定的大小才能在子元素上使用％。所以实际上，你是对的:)我的文章的意思可能不够清楚。 –

容器高度是0px。所以你不能给高100％

你有

看看这个更新

 #container { 
     position:relative; 
     width:100%; 
     height:100%; 
     line-height: 0; 
    } 
    .banner { 
     width:100%; 
    } 
    #studentenlijn { 
     width:200px; 
     height:30px; 
     position:absolute; 
     top:35px; 
     left:72%; 
     background-color:#660000; 
line-height:30px 
    }

http://jsfiddle.net/YGeLA/2/

来源

2014-05-19 15:44:45

css在图像上的相对对齐

回答

相关问题