CSS: bloc central, mais aligner le contenu vers la gauche
Je veux qu'un bloc entier soit centré dans son parent, mais je veux que le contenu du bloc soit aligné à gauche.
Les exemples servent le mieux
Sur cette page :
L'art ascii devrait être centré (tel qu'il apparaît) mais il devrait s'aligner et ressembler à "YAML".
Ou ceci :
Le message d'erreur devrait être aligné comme dans une console.
8 réponses
Tout d'abord, créez un parent div qui Centre son contenu enfant avec text-align: center. Ensuite, créez un enfant {[1] } qui utilise display: inline-block pour s'adapter à la largeur de ses enfants et text-align: left pour aligner le contenu qu'il contient à gauche comme vous le souhaitez.
<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>Reposter la réponse de travail de l'autre question: comment centrer horizontalement un élément flottant d'une largeur variable?
En Supposant que l'élément qui est proposé et sera centré est un div avec un id="contenu" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
Et appliquer 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
Si je vous comprends bien, vous devez utiliser pour centrer un conteneur (ou un bloc)
margin-left: auto;
margin-right: auto;
Et pour aligner à gauche son contenu:
text-align: left;
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Normalement, vous devriez utiliser margin: 0 auto sur le div comme mentionné dans les autres réponses, mais vous devrez spécifier une largeur pour le div. Si vous ne voulez pas spécifier une largeur, vous pouvez non plus (cela dépend de ce que vous essayez de faire) utiliser des marges, quelque chose comme margin: 0 200px;, cela devrait rendre votre contenu centré, vous pouvez également voir la réponse de leyu à ma question
Est-ce ce que vous recherchez? Flexbox...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>J'ai trouvé le moyen le plus simple d'aligner le texte au centre et à gauche dans un conteneur est le suivant:
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 cherchiez car il m'a fallu un peu de recherche juste pour comprendre cette solution assez basique.
Cela fonctionne
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>