marge: 0 auto ne pas centrer?

J'ai essayé le code suivant dans Chrome, Firefox et Safari, mais mon div n'est pas vraiment centré.marge: 0 auto ne pas centrer?

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link href="custom.css" media="screen" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div class="center">Hello!</div> 
</body> 
</html>

custom.css:

.center { 
    width: 400px; 
    margin: 0 auto; 
    border: 5px solid black; 
}

Ce produit ce qui suit dans Chrome: alt text

et vous pouvez voir que la marge de gauche est plus grande que la droite marge.

Qu'est-ce que je fais mal?

Source

2010-10-30 grautur

Est-ce votre fichier 'custom.css' complet? Qu'est-ce que le 'remplissage 'de vos' 'et' 'ressemble? –

Ouais, c'était mon fichier custom.css complet. Je ne me suis pas rendu compte qu'il y avait du remplissage ou des marges par défaut sur le HTML et le corps, donc la réponse de Time Machine l'a corrigé. – grautur

Amusez-vous!Oh, n'oublie pas de cliquer sur la coche verte avant qu'un zombie te mange, comme c'est Halloween. :) –

Il est parce que le corps a une marge (par défaut pour les navigateurs):

body { margin: 0px; }

Vous pouvez utiliser un CSS reset.

Cela devrait sembler normal si votre fenêtre est plus grande. Dans la capture d'écran, il est comme:

mug

Source

2010-10-30 20:15:13

Est-il correct d'appliquer 'body {margin: 0 auto; } 'pour centrer la page, ou devrions-nous ajouter un wrapper' div' avec un ID pour éviter une sorte de bogue? Merci! Par exemple, ici, il suggère d'utiliser #wrapper, et aussi d'appliquer 'text-align: center' au corps: http://www.webdesignerforum.co.uk/topic/2473-tutorial-how-to-center-a -site-using-css/(mais ne l'explique pas vraiment bien) – Baumr

-3

Essayez ceci comme pour votre classe css de .center:

.center { largeur: 400px; marge gauche: auto; marge droite: auto; bordure: 5px noir uni; }

Source

2010-10-30 20:14:15 3sdmx

La fenêtre est trop étroite. Les marges automatiques centrent les éléments dans l'espace disponible, si l'espace est plus étroit que l'élément, alors il devient aligné à gauche. Donc, de gauche à droite, vous voyez le rembourrage ou la marge sur l'élément de corps (marge dans ce cas comme c'est Chrome), puis la bordure pour div, puis la largeur de 400px, puis la bordure suivante, et puis le bord de la fenêtre car il n'y a plus d'espace pour rendre la marge droite du corps.

Source

2010-10-30 20:18:22 Quentin

J'ai eu de la difficulté à centrer les boutons en chrome. donner de la largeur aux boutons fonctionnera. Mais cela provoque un problème avec tous les boutons ayant une largeur.

Cette correction semble être bonne dans les navigateurs. La solution principale serait de donner une largeur aux boutons de type d'entrée, cela fonctionne, mais quand vous avez une grosse application web, gérer toutes ces tâches n'est peut-être pas faisable.

Trouvé ceci, oui c'est un hack, mais semble fonctionner dans IE7-9 FF chrome.

.submitArea .actButton {margin-right: auto !important; margin-left: auto !important; display: block;} 
@media screen and (-webkit-min-device-pixel-ratio:0) { .submitArea .actButton {display: inline-block !important;}} /* chrome hack - needs width for buttons to center */

Source

2012-05-10 13:25:58

-1

vous devez ajouter un positionnement relatif à votre css.

.center { 
position:relative; 
width: 400px; 
margin: 0 auto; 
border: 5px solid black; 
}

Source

2012-11-13 23:11:07

Je ne pense pas. – Sven

marge: 0 auto ne pas centrer?

Répondre

Questions connexes