J'essaie d'obtenir un espace centré dans l'espace qui reste vide par une barre latérale. C'est comme ça que j'aimerais avoir l'air de:
CSS html Cependant, il ne fonctionne pas avec IE9. Il est étrange car IE8 fonctionne bien! Je suis à court d'idées, alors je pensais que peut-être que quelqu'un sait ce qui se passe? L'astuce semble fonctionner parfaitement partout ailleurs. note : Veuillez noter que le contenu 
< P> J'ai réussi à faire ce travail OK pour la plupart des navigateurs à l'aide de Marge: auto pour le div en question, lors de la définition Overflow: caché : div doit être flexible tel qu'il est dans la démo. Comme l'espace disponible diminue, il devrait changer la taille et la presser.
4 Réponses :
Les flotteurs sont une entreprise délicate. Strictement parlant, ils ne sont censés affecter que le contenu en ligne qui les entoure, de sorte que les marges agissent comme les flotteurs ne sont même pas là.
Essayez cela à la place: P>
#container {text-align:center}
#content {display:inline-block;text-align:left}
Merci beaucoup. Il fonctionne ( #content est centré sur), mais cela crée un autre problème qui est encore pire: le contenu ne s'adapte pas à l'espace disponible. Lorsque vous diminuez la taille de la fenêtre, vous verrez que #content finira par descendre.
Autant que je me souvienne que j'ai toujours des problèmes avec ou en pourcentage: marge: 0 auto parce que je n'ai pas spécifié largeur propriété.
Donc, chaque fois que vous souhaitez utiliser margin: auto Vous devez écrir sur ceci:
Merci, j'avais déjà pensé à cela, mais je ne veux pas que la largeur du contenu soit corrigée. Je veux juste que cela ait un maximum, mais il s'adapte ensuite à n'importe quel espace disponible.
affecte IE9 / 10. P>
Ça fonctionne bien si l'élément flotté est supprimé ou si Pour résoudre ce problème, placez la teneur centrée dans une enveloppe DIV, de sorte que le centrage du contenu puisse être séparé du flottant de la barre latérale. En d'autres termes, trop se passe la mise en page sage dans un seul div, plus que IE9 + peut gérer. Donc, scinder le p> largeur code> est utilisé à la place de max-largeur code>. La présence de contenu flotté, combinée à l'utilisation de marge: auto code> et max-largeur code> au lieu de largeur code>, semble être déroutant IE9 +. #content code> divisé en deux divs distincts. P>
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
Appuyant cela. IE 8, et Dernier Firefox, Safari, Chrome semblent gérer le positionnement absolu, le max-largeur et la marge-auto dans le même DIV. Ie 9, 10 et 11 N'EST PAS - Ils vont positionner à gauche. J'ai confirmé que la division «Absoluting» et la max-largeur / Margining fonctionne bien pour tous les navigateurs, dont IE 9, 10 11. Merci Matt =)
Ie est notoire pour ne pas fonctionner sans doctypes appropriés.
Essayez d'ajouter le HTML5 One P>
<!DOCTYPE html>
Si vous souhaitez que le contenu centré ait une largeur variable, cela règle à peu près en utilisant
marge: auto;@MattCoughlin IE8 et tous les navigateurs modernes en outre IE9 semblent être en désaccord, cependant: /
hmmm ... une fois que le
max-largeur commence, il doit fonctionner comme une largeur fixe implicite, de sorte quemarge: auto a une largeur fixe pour fonctionner (sauf Dans IE9, je suppose).Il y a une solution assez ancienne pour le centrage automatique des flotteurs dans un conteneur: Artlebedev .com / Outils / Technologette / HTML / Align-Centre