2013-01-10 37 views
0

我有一個標記,看起來像這樣:地點的div居中

<div style="width: 150px; height: 250px;"> 
    <img src="Image1.jpg" /> 

    <div class="YellowExclaimIcon iconsBlack"></div> 
</div> 

我想實現如下:

Result

含義是圖片應該始終放置在父div的中心(水平和垂直方向),並且警告圖標應位於圖像的頂部,並且右邊和底部的邊距爲5。

要注意的另一件事是,圖像的寬度和高度並不總是相同的,但警告圖標的位置應始終是正確的位置。

YellowExclaimIcon類包含背景圖像,但如果需要可以更改爲圖像。需要考慮的是該圖片還具有最大寬度和最大高度。

我試過在這個線程的答案CSS Help - div over image,但我不能讓它與中心工作。

+0

你允許改變的標記?因爲如果圖像寬度可變,我不認爲你可以在不改變標記的情況下做到這一點... –

+0

是的,我可以儘可能多地改變標記。圖像寬度是可變的。 – Dumpen

+0

謝謝,我把你的標記作爲答案。 – Dumpen

回答

4

如果圖像寬度&高度是可變的,則只能如果你改變了標記,像這樣實現這一點:

<style type="text/css"> 
    div.container { 
     width:150px; height:250px; display:table-cell; vertical-align:middle; 
     text-align:center; background-color:#ededed} 
    div.image { 
     position:relative; display:inline-block; } 
    div.image img { 
     display:block; } 
    div.YellowExclaimIcon { 
     position:absolute; width:80px; height:80px; bottom:5px; right:5px; 
     background:transparent url(your-icon.png) no-repeat 100% 100%} 
</style> 

<div class="container"> 
    <div class="image"> 
     <img src="Image.jpg" alt="" /> 
     <div class="YellowExclaimIcon"></div> 
    </div> 
</div> 

上面的示例將始終水平&垂直對齊的圖像中的中心,在右下角有一個圖標,5px頁邊距。

檢查工作示例:http://jsfiddle.net/Q9uhV/

1

使用position:relative到外股利和​​absolute到內部的div

HTML

<div class="outer"> 

    <div class="YellowExclaimIcon"></div> 
</div> 

CSS

.outer{ 
    width: 150px; height: 250px; 
    border:solid red 1px; 
    position:relative; 
    vertical-align:middle; 
    background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center; 
} 
.outer img{text-align:center; vertical-align:middle} 
.YellowExclaimIcon{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%; 
} 

DEMO

0

您需要使用的z-index和一些定位是這樣的:

<div style="width: 150px; height: 250px;"> 
    <img src="Image1.jpg" style="z-index:-1" /> 

    <div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div> 
</div> 

..for例如,設置頁邊距到你所需要的。

0

製作您的警告圖像absolute,以便您可以將其放置在指定位置的其他圖像上。

HTML:

<div class="container"> 
    <img src="penguin.png" /> 
    <img class="warning" src="warning.png" /> 
</div> 

CSS:

.warning { 
    position:absolute; 
    left:80px; 
    top:80px 
} 

的演示中看到this jsFiddle