2015-06-17 51 views
1

在div裏面我有一些圖像,我希望它們重疊。我希望他們所有人都有相同的中心,並且相對於他們的母公司。現在,當我調整一個窗口的大小時,我不希望它們被重新調整大小......我如何實現這一效果?對不起,沒有代碼。謝謝!HTML-CSS:重疊的項目具有相同的中心?

HTML:

<div class="columns small-6"> 
       <h4 id="label_1">Πάγωσε η κόλαση...</h4> 
       <h4 id="label_2">Μπρρρ!</h4> 
       <h4 id="label_3">Κρύο</h4> 
       <h4 id="label_4">Έτσι κ'έτσι...</h4> 
       <h4 id="label_5">Καλό</h4> 
       <h4 id="label_6">Πολύ καλό!</h4> 
       <h4 id="label_7">Κάνεις κοιλιακούς!</h4> 

       <img class="button" src="static/thermostat.png"> 
       <img class="slider unselectable" src="static/thermostat_slider.gif" draggable="false"> 
       <div class="inside"><img class="inside_thing" src="static/inside_thing.png"><h3 class="give_joke">ΔΩΣΕ!</h3></div> 

CSS:

.button { 
    position: absolute; 
    background-color: hsla(200, 0%, 0%, 0); 
    width: 100em; 
    top: 1.5em; 
} 

.slider { 
    position: absolute; 
    width: 90em; 
} 

.inside { 
    position: absolute; 
    width: 10em; 
    top: 11em; 
    left: 11.5em; 
} 

當然,當窗口大小的東西不留心...... 哦,我還用粉底5爲電網。

+0

你用'max-width'和'max-height'來試試嗎? – Chris

+0

你需要給我們一些代碼。你試過什麼了? – Lance

+0

我添加了一些代碼,你可能不理解希臘文本,無所謂... – Antoni4040

回答

0

嘗試使用左右邊距中的百分比來確定絕對中心;

.inside{ 
    position: absolute; 
    width: 10em; 
    top: 50%; 
    left: 50%; 
    margin-left: -5em; 
    margin-top: -5em; 
} 
+0

不,當窗口大小調整時,仍然一切都不在中心... – Antoni4040

相關問題