Je veux qu'un bloc entier soit centré dans son parent, mais je veux que le contenu du bloc soit aligné à gauche.
Les exemples sont les plus parlants
Sur cette page :
l'image ascii devrait être centrée (comme elle apparaît) mais elle devrait s'aligner et ressembler à "YAML".
Ou encore ceci :
le message d'erreur devrait s'aligner comme dans une console.
Créez d'abord un parent div qui centre son contenu enfant sur text-align: center . Ensuite, créez un enfant div qui utilise display: inline-block pour s'adapter à la largeur de ses enfants et text-align: left pour que le contenu qu'il contient s'aligne à gauche comme souhaité.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>Si vous souhaitez vous assurer qu'une longue ligne n'élargit pas trop le tout, vous pouvez également appliquer la fonction max-width (avec une valeur de votre choix) à la balise intérieure :
max-width: 250px;Reprise de la réponse de travail de l'autre question : Comment centrer horizontalement un élément flottant de largeur variable ?
En supposant que l'élément qui est flottant et qui sera centré est un div avec un id="content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>Et appliquez le CSS suivant
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}Voici une bonne référence à ce sujet http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
J'ai trouvé que la façon la plus simple de centrer et d'aligner à gauche le texte à l'intérieur d'un conteneur est la suivante :
HTML :
<div>
<p>Some interesting text.</p>
</div>CSS:
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}J'espère que c'est ce que vous cherchez, car il m'a fallu pas mal de recherches pour trouver cette solution assez basique.
Normalement, vous devriez utiliser margin : 0 auto sur la div comme indiqué dans les autres réponses, mais vous devrez spécifier une largeur pour la div. Si vous ne voulez pas spécifier de largeur, vous pouvez soit (cela dépend de ce que vous essayez de faire) utiliser des marges, quelque chose comme margin : 0 200px ; , cela devrait donner l'impression que votre contenu est centré, vous pouvez aussi voir la réponse de Leyu à ma question
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
