Flotter un DIV centré sur un autre DIV

Question

J'essaye de faire flotter un div sur un autre mais au centre (largeur).

EDIT: Je veux que le conteneur div soit sur le div supérieur et centré.

CSS actuel:

body { 
    background-color: #FFF; 
    margin: auto; 
} 

#top { 
    background-color: #F2F2F2; 
    border-bottom: 1px solid #CCC; 
    height: 150px; 
    position: relative; 
} 

#container { 
    background-color: #FFF; 
    border: 1px solid #CCC; 
    width: 920px; 
    height:300px; 
    position: absolute; 
    top:0; 
    right:auto; 
} 

Voici ce que je reçois:

Answer 1

gauche ensemble: 50% et margin-left: -460px (la moitié de la largeur de la div)

Answer 2

Je suggérerais de mettre l'attribut de position de # top à absolute et d'utiliser un peu de javascript pour définir l'attribut left à gauche du conteneur + la moitié de la largeur de # container - la moitié de la largeur de # top.

-à-dire, après y compris jQuery (non testé).

$(document).ready(function(){
    var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
    $("#top").css("left", topLeft);
});

Dans le cas où gauche est nulle, comme dans l'exemple que vous avez donné, que $ ("# conteneur") css ("gauche") terme est inutile.

EDIT: Vous devrez également être sûr de définir les attributs z-index des deux divs de manière appropriée.

Answer 3

Essayez ceci. Il n'est pas testé, mais vous devez définir le conteneur div sur relatif, puis div à l'intérieur de ce qui est absolu.

body { 
     background-color: #FFF; 
     margin: auto; 
    } 

#top { 
    background-color: #F2F2F2; 
    border-bottom: 1px solid #CCC; 
    top: 50%; 
    left: 50%; 
    position: absolute; 
} 

#container { 
    background-color: #FFF; 
    border: 1px solid #CCC; 
    width: 920px; 
    height:300px; 
    position: relative; 
    right:auto; 
}