J'essaie de centrer mon contenu div. Il est défini sur 100% et la div est contenue dans body, qui est également défini sur 100%. J'ai une largeur maximale: 1400 pixels car je ne veux pas que mon contenu s’étire davantage que celui-ci si la résolution de l’écran est plus haute. Le problème est que cela ne fonctionne pas avec margin: auto. Mon contenu est affiché à gauche, non centré sur un écran plus large que 1 400 pixels.
Si je supprime la largeur maximale, tout est parfaitement centré sur les écrans larges, mais le contenu est étendu sur tout l'écran ...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Réponses:
6 pour la réponse № 1Le moyen le plus simple pour y parvenir est de définir le width propriété à la largeur maximale dont vous avez besoin, et ajoutez max-width: 100%;. Cela l'empêchera d'être supérieur à 100% tout en allant jusqu'à la largeur maximale. En outre, vous devriez retirer le absolute positionnement:
0 pour la réponse № 2
Utilisez Flexbox ...
Placez ces classes dans l'élément parent (le corps):
Le HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Où:
- p-flexbox veux dire parent-flexbox
- flex-hcc veux dire flexbox-horizontal-center-center
Le CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
À votre santé, Leonardo
0 pour la réponse № 3
Vous pouvez utiliser le transform technique, qui ne nécessite pas de requêtes supplémentaires de balisage ou de support.
#content {
position: relative; /* "fixed" will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Voici une démo https://jsfiddle.net/matharden/6uduf7av/