Centrer Plusieurs divs flottants dans un conteneur

D'accord, voici un lien vers le site sur lequel je travaille. J'ai actuellement le message dans son propre div (#messagebox) et l'image dans son propre div (#picture). Ces deux divs sont flottants vers la gauche. Je les ai mis dans un container div appelé #intro_container. Je voudrais centrer ce div contenant, mais j'ai des problèmes avec ça. J'ai essayé de mettre les marges à 0 et à l'auto mais cela n'a pas fonctionné. Cela doit être une sorte de problème avec la quantité de différents niveaux de divs que j'essaie de travailler avec ....Centrer Plusieurs divs flottants dans un conteneur

Toute aide serait grandement appréciée!

Source

2010-01-20 Dan

Définissez une largeur sur votre conteneur #intro_container, sinon margin: 0 auto; ne fonctionnera pas.

Source

2010-01-20 19:55:26

ahh Je pensais que peut-être la question .... donc je dois calculer une largeur qui est au moins la largeur des 2 divs à l'intérieur et alors je devrais être en mesure de définir la marge: 0 auto ;? – Dan

Oui, si elle est plus courte que la largeur des deux divs, les divs flottants vont simplement s'empiler les uns sur les autres. Et si c'est plus grand, ça va juste apparaître décentré. Assurez-vous de prendre en compte les marges ou le remplissage, car cela ajoutera de la largeur. –

Pour que 0 auto fonctionne, vous devez spécifier une largeur.

Vous pouvez tout mettre dans un conteneur div, avec quelque chose comme largeur 900px marge 0 auto, ou vous pouvez simplement appliquer ces styles à intro conteneur.

Votre css adapte maintenant tout à la largeur de la fenêtre, donc float left envoie les images à la largeur de intro_container, qui n'a pas de largeur définie.

Notez également que vous pouvez appliquer votre identifiant directement à l'image! pas besoin d'envelopper dans un div. C'est une bonne pratique de styliser les éléments sémantiquement.

Source

2010-01-20 20:00:35 DeaconDesperado

parfois il est bon de centrer les choses comme ça:

<html> 
<head> 
</head> 
<body> 
<div style="position:relative;width:400px;height:400px;background-color:green"> 

    <div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red"> 
here attribute 'left' is half of this container width 
    </div> 
</div> 
</body> 
</html>

toujours travailler

Source

2010-01-20 20:03:01 dfens

Centrer Plusieurs divs flottants dans un conteneur

Répondre

Questions connexes