Centrage large div à l'intérieur d'un masque plus mince div

J'essaie de centrer un div large à l'intérieur d'un plus petit, et de le centrer. Cela peut-il être fait?Centrage large div à l'intérieur d'un masque plus mince div

J'ai ceci:

HTML

<body> 
<div id="full_container"> 
<div id="machine_mask"> 
<div id="machine_container"> 
<!---- SOME CONTENT HERE ---> 
</div> 
</div> 
<div class="machine_footer"> 
<img src="sprites/base_maquina.png" alt="panel de control" /> 
</div> 
</div> 
</body>

CSS

body { 
    margin :0; 
} 
div#full_container { 
    width: 100%; 
    height: 100%; 
    background: #805080; 
} 
div#machine_mask { 
    margin-top: 30px; 
    width: 100%; 
    display: inline-block; 
    height: 600px; 
    background: #805080; 
    position: relative; 
    overflow: hidden; 
} 
div#machine_container { 
    width: 1230px; 
    height: 500px; 
    background: #805080; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
}

Lorsque la fenêtre est plus large que 1230px, il centre, mais j'ai vraiment besoin pour qu'il soit centré quand la fenêtre est plus petite ...

Y a-t-il un moyen de faire cela? (Je pensais utiliser jQuery et le repositionner, mais je préfèrerais vraiment le faire en css)

Merci beaucoup!

Source

2013-07-25 Sebi Sanchez

Vous pouvez utiliser le hack de positionnement absolu.

div#machine_container { 
    width: 1230px; 
    height: 500px; 
    background: #805080; 
    position: absolute; 
    left: 50%; 
    margin-left: -615px; //half of 1230px 
    overflow: hidden; 
}

Source

2013-07-25 23:38:36 Chad

Merci beaucoup! Je ne pouvais pas le commenter quand vous l'avez posté, mais cela m'a aidé beaucoup de temps! –

Cela ressemble à 100 ans de retard, mais j'ai trouvé une meilleure solution pour le contenu avec une hauteur ou largeur dynamique: haut: 50%, gauche: 50%, transformer (traduire (-50%, - 50%)); –

@SebiSanchez bien oui. C'était il y a 3 ans et demi: P flexbox serait la meilleure solution. – Chad

Centrage large div à l'intérieur d'un masque plus mince div

Répondre

Questions connexes