Ich möchte, dass ein ganzer Block in seinem übergeordneten Block zentriert wird, aber ich möchte, dass der Inhalt des Blocks linksbündig ausgerichtet wird.
Beispiele dienen am besten
Auf dieser Seite :
Die ASCII-Kunst sollte zentriert sein (wie es scheint), aber sie sollte ausgerichtet sein und wie "YAML" aussehen.
Oder dieses :
Die Fehlermeldung sollte alle wie in einer Konsole angezeigt werden.
Antworten:
Erstellen Sie zunächst ein übergeordnetes Element div, mit dem der untergeordnete Inhalt zentriert wird text-align: center. Erstellen Sie als Nächstes ein untergeordnetes divElement display: inline-block, das sich an die Breite seiner text-align: leftuntergeordneten Elemente anpasst und den darin enthaltenen Inhalt wie gewünscht nach links ausrichtet.
<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>Reposting der Arbeitsantwort von der anderen Frage: Wie zentriere ich ein schwebendes Element mit variabler Breite horizontal?
Angenommen, das Element, das schwebt und zentriert wird, ist ein div mit einer id = "content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
Und wenden Sie das folgende CSS an
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Hier ist eine gute Referenz zu http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
preund dem "Inhalt" code.
This will be centeredder Text nicht in eine Zeile passt, der Text umbrochen wird und der Block die volle Breite hat, der Text jedoch weniger als die volle Breite. Obwohl der Block zentriert ist, spielt dies keine Rolle, da der Text ist NICHT die volle Breite des enthaltenen Blocks. Ein Beispiel finden Sie in Abbildung 2a von stackoverflow.com/questions/8702802/… .
Wenn ich Sie gut verstehe, müssen Sie einen Container (oder Block) zentrieren.
margin-left: auto;
margin-right: auto;
und links ausrichten den Inhalt:
text-align: left;
Normalerweise sollten Sie margin: 0 auto für das div verwenden, wie in den anderen Antworten erwähnt, aber Sie müssen eine Breite für das div angeben. Wenn Sie keine Breite angeben möchten, können Sie auch Ränder verwenden (dies hängt davon ab, was Sie versuchen), z. B. margin: 0 200px; Dies sollte Ihren Inhalt so erscheinen lassen, als ob er zentriert wäre. Sie könnten auch die Antwort von Leyu auf meine Frage sehen
Ich habe festgestellt, dass der einfachste Weg, Text in einem Container zu zentrieren und nach links auszurichten, der folgende ist:
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
}
Ich hoffe, das ist genau das, wonach Sie gesucht haben, da ich ziemlich viel gesucht habe, um diese ziemlich einfache Lösung herauszufinden.
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Suchst du danach? 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>Das funktioniert
<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>