J'essaye de centrer divs à l'intérieur d'un autre div

Here est l'échantillon avec lequel je travaille. Je ne voudrais pas utiliser de javascript si possible, et si absolument nécessaire avec aucune autre solution possible j'utiliserais jQuery.J'essaye de centrer divs à l'intérieur d'un autre div

Les 3 divs internes que j'essaie de centrer sont un exemple. Dans le résultat final, ceux-ci sont générés par le script, donc je ne connaîtrai pas la largeur ou la hauteur pour utiliser une taille px négative pour la marge dans la classe .circle. Je serais prêt à changer la structure de la div mais je cherche quelque chose de propre et simple, bien que je préfère changer la structure que d'utiliser javascript.

FF4, Safari (iOS)/Chrome, IE9 sont mes cibles finales.

modifier:

This est le résultat final, je voudrais, mais son utilisation de jquery.

La réponse de Dan fonctionnerait aussi bien. Il met le fardeau sur le script de génération pour calculer les marges négatives. Ce serait acceptable à la fin je pense, mais j'espérais que tout ce que je devrais fournir serait la taille désirée et pas toute information liée au positionnement du script de génération.

@thirtydot - À l'heure actuelle, aucun. Je code à la main. à la fin, cela serait généré par PHP ou C# en fonction de ma plate-forme serveur.

Source

2011-03-25 Justin808

' "ceux-ci sont générés par script"' - ce script? Si elles sont générées par programme, pourquoi ne pouvez-vous pas simplement afficher les valeurs de marge négatives requises selon la réponse de Dan Marshall? – thirtydot

Je vois. Vous savez que vous * pouvez * juste afficher les marges négatives, mais vous cherchez un moyen d'éviter cela, idéalement sans JavaScript. – thirtydot

Obtenir des marges négatives au même endroit que les tailles:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
    .container 
    { 
     position: relative; 
     width: 500px; 
     height: 500px; 
     border: 1px solid yellow; 
    } 
    .circle 
    { 
     position: absolute; 
     -moz-border-radius: 100%; 
     border-radius: 100%; 
     top: 50%; 
     left: 50%; 
    } 
    .white 
    { 
     border: 1px solid White; 
    } 
    body 
    { 
     background-color: black; 
    } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="circle white" style="width: 100px; height: 100px; margin-top:-50px; margin-left: -50px"></div> 
     <div class="circle white" style="width: 200px; height: 200px; margin-top:-100px; margin-left: -100px"></div> 
     <div class="circle white" style="width: 400px; height: 400px; margin-top:-200px; margin-left: -200px"></div> 
    </div> 
</body> 
</html>

Source

2011-03-25 21:24:20

Battez-moi. :) – RSG

Centre avec margin: 0 auto.

Vous n'avez pas besoin de connaître la largeur à l'avance, tant qu'ils sont défini explicitement.

Source

2011-03-25 21:21:58 Kon

@Kon Cela ne fonctionnera pas si aucune largeur n'est spécifiée. –

Droite. Mais ils sont - sur les éléments HTML .. en ligne. – Kon

@Kon True, mais l'autre problème est que OP a des marges supérieures spécifiques qu'il utilise. Jetez un oeil à son jsfiddle et vous verrez ce que je veux dire. Votre code écraserait ces marges en les centrant. –

Eh bien, si elle revient à elle, voici une action jQuery pour faire le travail.

$(".circle").each(function(){ 
    $(this).css({top: -$(this).height()/2, left: -$(this).height()/2 }); 
});

Démo:jsfiddle.net/Marcel/7ucme

Source

2011-03-25 21:32:00 Marcel

J'essaye de centrer divs à l'intérieur d'un autre div

Répondre

Questions connexes