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在圖像上的相對對齊

回答

相關問題