La page n'est pas centrée

-1

J'ai un problème étrange, il y a plus d'espace sur la gauche de mon contenu, puis il y a plus à droite. La page est http://travisjterry.com/NuvigilSurvey/treated.html La page n'est pas centrée

Je ne suis pas sûr de ce que je manque ici. Je largeurs pour mon en-tête et la section avec

margin: 0 auto;

J'ai essayé de mettre l'en-tête et la section dans un autre div pour essayer d'aligner cette façon, mais ne l'ai pas eu de chance.

Une idée de ce qui me manque ici?

Source

2013-08-16 Travis

Vous ne montrez même pas votre sélecteur à partir de votre CSS. Et quel est votre HTML? S'il vous plaît nous montrer ce que vous faites. –

Cette question semble être hors sujet car elle n'inclut pas le code nécessaire pour reproduire le problème indiqué. –

supprimer cette règle de votre CSS, cela affecte la tag <html> en raison de Modernizr et je ne pense pas que vous devez réellement

.audio { 
    width: 700px; 
    height: 60px; 
    margin: 0 auto; 
}

Source

2013-08-16 18:01:45

Vous m'avez aidé à résoudre non seulement ce problème, mais un autre! Merci beaucoup! – Travis

@Travis heureux d'aider. Si vous pensez que cette réponse a été résolue, veuillez la marquer comme "acceptée" en cliquant sur la coche verte à côté de celle-ci. –

Yepp J'essayais de la marquer plus tôt mais la réponse doit être levée quelques minutes avant qu'elle puisse être acceptée . Malgré les votes négatifs j'ai eu la question j'apprécie votre aide. – Travis

Ajoutez une largeur de 812px à vos balises html et body.

La raison pour laquelle il n'est pas centré est que les balises html et body sont explicitement dimensionnées plus petit que le contenu qu'elles contiennent. Le contenu le plus interne occupe 812 pixels de largeur, tandis que les éléments parents sont définis sur 700 pixels. Ainsi, tous les conteneurs de contenu sont centrés, et le contenu réel en sort, ce qui le rend déporté. Comme moyen facile de voir cela est de faire un clic droit sur l'élément de contenu dans Chrome ou FF et choisissez "Sélectionner élément", ce qui fera apparaître un volet avec le code HTML. Passez la souris sur le code HTML de votre élément le plus à l'intérieur pour en voir un contour encadré à l'écran, puis déplacez votre souris sur les éléments contenant pour voir si leurs contours encadrés sont de la même taille. Vous voudrez peut-être envisager de mettre une largeur explicite sur vos classes de conteneur, en particulier celles qui ont besoin de marges ou de remplissage, et de définir une largeur de 100% pour les éléments qu'elles contiennent.

Source

2013-08-16 17:59:12 StronglyTyped

Le problème est que le remplissage pour .wrap étend la largeur définie en raison du modèle de boîte.

Je recommande d'utiliser un box-sizing pour tous les éléments et le réglage des largeurs si nécessaire:

* { 
    -moz-box-sizing: border; 
    box-sizing: border; 
}

Vous pouvez en savoir plus sur la question ici: Box-sizing: border-box FTW!

Source

2013-08-16 18:00:06

Tout ce que vous devez faire i s:

html, body { 
    width: 100%; 
}

Et voila, votre section.wrap est centrée.

J'ai vérifié cela sur votre site réel avec les outils de développement de Chrome ...

enter image description here

Source

2013-08-16 18:05:55 hannebaumsaway

-1

utiliser certains de ces codes ici:

<meta name="viewport" width="device-width" />

Puis deuxième serait:

html, body { 
width: 100%; 
height: 100%; 
}

Toutefois, j'ai consulté votre page dans Chrome. C'est magnifique! Aucun problème du tout.

Source

2013-08-16 18:10:22

Vous avez un.classe audio avec une largeur fixe. Si vous modifiez la largeur à 700 px, le reste de la mise en page sera à nouveau centré.

Source

2013-08-16 18:12:03 Giannis

La page n'est pas centrée

Répondre

Questions connexes