Je suis en train de créer un site Web pour Advanced Web Design et je suis coincé sur quelque chose. Je veux que le contenu de la page (contenu dans un <div>) soit centré. En utilisant CSS, j'ai essayé ceci:

body {text-align: center; margin-left: auto; margin-right:auto;}

Cela ne semblait pas fonctionner. Je sais que vous pouvez détecter une résolution de navigateur en utilisant Javascript, et j'ai réfléchi. Comment pourrais-je détecter la largeur et l'utiliser pour définir les marges gauche et droite du corps? Ce serait ((resolutionWidth - 800) / 2) pour déterminer les marges dont j'ai besoin (la <div> est large 800px).

1
Josh I 12 déc. 2011 à 08:54

4 réponses

Meilleure réponse

margin: 0 auto est l'un des moyens les plus simples de centrer le contenu sur un site Web. N'utilisez pas JS pour centrer le contenu, sauf si vous en avez absolument besoin.

Découvrez ce jsFiddle sur la façon d'utiliser margin: 0 auto: http://jsfiddle.net/NfRtV/

2
Christian Varga 12 déc. 2011 à 05:00

Définissez votre largeur dans le même élément que vos marges auto. Donc quelque chose comme ça:

#page { width: 800px; margin: 0 auto; }

Dans certaines versions d'IE, cela ne fonctionne pas, alors enroulez un div autour de cet élément, en lui donnant text-align: center, et réinitialisez-le dans un div enfant.

Exemple de balisage:

<body>
  <div id="ie-page-center">
    <div id="page">
    ...
    </div>
  </div>
</body>

Exemple CSS:

#ie-page-center { text-align: center; }
#page { width: 800px; margin: 0 auto; text-align: left; }
0
Sean Adkinson 12 déc. 2011 à 04:59

Utilisez ce code

<script language="javascript"> alert('Width:' + screen.width+ ' & Height: ' +screen.height); </script>
0
Gaurav Agrawal 12 déc. 2011 à 05:10

margin: auto ne fonctionne que si l'élément a une largeur. Essayez de spécifier la largeur et de retester votre code!

http://jsfiddle.net/ZQjVL/2

body { 
  width: 500px; 
  margin: auto; 
  border: 1px solid black; 
  text-align: center; 
 }

Vous ne pouvez pas détecter la résolution de leur moniteur, mais vous pouvez détecter la largeur et la hauteur de l'écran. Ceux-ci sont accessibles via javascript. Bien que vous ne deviez évidemment pas le faire de cette façon car il existe une méthode CSS pour le faire.

  viewportwidth = window.innerWidth;
  viewportheight = window.innerHeight;
0
mrtsherman 12 déc. 2011 à 05:03