comment obtenir conteneur principal div pour aligner au centre

HI tous,comment obtenir conteneur principal div pour aligner au centre

Je AllWays demandais comment d'autres gens à aligner au centre du conteneur principal div comme la seule façon dont je gère à ce jour est d'ajouter à la le fichier css est le suivant:

* { rembourrage: automatique; marge: auto; text-align: center; }

J'ai vu d'autres pages à l'aide: * {padding: 0px; margin: 0px} mais je ne vois pas où ou que font-ils, de centraliser le conteneur principal.

Quelqu'un pourrait-il expliquer comment?

Exemple de code:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> 
<title>This is the main container</title> 
<style type="text/css"> 
*{ 
padding:auto; 
margin:auto; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;"> 
<b>This is the main container.</b> 
</div> 
</body> 
</html>

pourrait-il expliquer comment ils le font dans la page suivante? http://www.csszengarden.com/?cssfile=/179/179.css&page=4

Merci

Source

2010-02-17 Amra

vous pouvez également vous envelopper le contenu avec

, mais la meilleure solution est inférieure – ant

sur la page que vous avez lié à ils utilisent automatiquement la marge sur le récipient.Cependant, le remplissage automatique n'est pas nécessaire et peut même perturber certains navigateurs. – wheresrhys

@wheresrhys: Merci, je ne peux pas le trouver sur le css. – Amra

Ne pas utiliser le sélecteur * comme qui appliquera à tous les éléments sur la page. Supposons que vous ayez une structure comme ceci:

... 
<body> 
    <div id="content"> 
     <b>This is the main container.</b> 
    </div> 
</body> 
</html>

Vous pouvez ensuite centrer le #content div en utilisant:

#content { 
    width: 400px; 
    margin: 0 auto; 
    background-color: #66ffff; 
}

Je ne sais pas ce que vous avez vu ailleurs, mais c'est le chemin à parcourir. L'extrait * { margin: 0; padding: 0; } que vous avez vu sert à réinitialiser les définitions par défaut du navigateur pour tous les navigateurs afin que votre site se comporte de la même manière sur tous les navigateurs, cela n'a rien à voir avec le centrage du conteneur principal.

La plupart des navigateurs appliquent une marge par défaut et un remplissage à certains éléments qui ne sont généralement pas compatibles avec les implémentations des autres navigateurs. C'est pourquoi il est souvent considéré intelligent d'utiliser ce type de «réinitialisation». La remise à zéro extrait de code que vous avez présenté est de feuilles de style de réinitialisation le plus simple, vous pouvez en savoir plus sur le sujet ici:

http://meyerweb.com/eric/tools/css/reset/

Source

2010-02-17 09:31:36

+1 pour votre réponse .. – ant

Il n'est pas bon d'appliquer * {padding: 0px; margin: 0px;}, pour le rendre plus compatible avec les navigateurs croisés? – Amra

@ César Lopes, à mon avis c'est, mais il semble y avoir des gens qui pensent autrement. Mais je dirais aller de l'avant avec ça. –

J'omettrait la déclaration * { text-align:center }, car il définit l'alignement central pour tous les éléments .

Habituellement avec un conteneur à largeur fixe margin: 0 auto devrait être assez

Source

2010-02-17 09:32:52

Vous pouvez text-align: centre du corps au centre du récipient. Puis text-align: quitte le conteneur pour obtenir tout le texte, etc. pour l'aligner à gauche.

Source

2011-02-02 20:25:57 Megan

Bienvenue dans Stack Overflow =) Veuillez prendre le temps de lire la page d'aide [Stack Overflow Markdown] (http://stackoverflow.com/editing-help/) pour savoir comment formater vos réponses. –

Le principe de base du centrage d'une page est d'avoir un corps CSS et un objet main_container CSS. Il devrait ressembler à ceci:

body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
#main_container { 
    margin: 0 auto; 
    text-align: left; 
}

Source

2011-06-06 09:36:09

comment obtenir conteneur principal div pour aligner au centre

Répondre

Questions connexes