頁面中間兩個div一個在另一個下

我想把兩個div放在第二個頁面的頂部，在頁面中間。一個將包含文本，第二個包含圖像。尺寸的div是不同的。首先是更寬，第二更高。我需要使用z-index，但我應該如何放置兩個中心居中（第三格100％高度和100％的頁面寬度？我可以做到這一點與:after，但當他們是相同的形狀，但不是當他們不一樣時形狀）。頁面中間兩個div一個在另一個下

來源

2016-12-27 cinkciarzzpolski

請發表**最小工作示例**的代碼（HTML/CSS/JS）在[Snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。參見[mcve]和[問]。 – vanburen

根本不清楚，你的意思是像http://codepen.io/gc-nomade/pen/eBwrJK？ –

默認情況下，<div>元素設置爲display: block，這意味着每個元素都將顯示在單獨的行上。如果你想讓它們一個在另一個之上出現，就把它們連續放在你的代碼中。接下來，你只需要添加此CSS：

myDiv { 
    position: relative // static (default) also works here 
    margin: auto; 
}

來源

2016-12-27 20:06:23

你不需要Z索引 –

這是他們如何把一個div放在另一個上面，但我需要的第二件事是把它們放在其他div的中間。我已經嘗試了幾種方法，但相對位置打破了所有的方法，div不再處於中間位置。這兩件事必須一起工作。 – cinkciarzzpolski

終於我找到了這種方式：

$(document).ready(function(){ 
$('#textDiv').css('top',parseInt($('#externalContainer').css('height'))/2 - parseInt($('#textDiv').css('height'))/2 + 'px'); 
$('#picDiv').css('top',parseInt($('#externalContainer').css('height'))/2 - parseInt($('#picDiv').css('height'))/2 - parseInt($('#textDiv').css('height')) + 'px'); 
$('#textDiv').css('left',parseInt($('#externalContainer').css('width'))/2 - parseInt($('#textDiv').css('width'))/2 + 'px'); 
$('#picDiv').css('left',parseInt($('#externalContainer').css('width'))/2 - parseInt($('#picDiv').css('width'))/2 + 'px'); 
});

來源

2016-12-27 23:45:09 cinkciarzzpolski

頁面中間兩個div一個在另一個下

回答

相關問題