Ich möchte, dass ein ganzer Block in seinem übergeordneten Element zentriert wird, aber ich möchte, dass der Inhalt des Blocks links ausgerichtet wird.
Beispiele helfen am besten
Auf dieser Seite :
die ASCII-Grafik sollte zentriert sein (wie sie erscheint), aber sie sollte in einer Linie stehen und wie "YAML" aussehen.
Oder dies:
sollte die Fehlermeldung wie in der Konsole angezeigt werden.
Erstellen Sie zunächst eine übergeordnete div die ihren untergeordneten Inhalt mit text-align: center . Als nächstes erstellen Sie ein Kind div die die display: inline-block an die Breite seiner Kinder anzupassen und text-align: left um den darin enthaltenen Inhalt wie gewünscht links auszurichten.
<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>Wenn Sie sicherstellen möchten, dass eine lange Linie nicht alles zu sehr verbreitert, können Sie auch die max-width (mit einem Wert Ihrer Wahl) in das innere Tag einfügen:
max-width: 250px;Wiederveröffentlichung der Arbeitsantwort der anderen Frage: Wie zentriert man ein schwebendes Element mit variabler Breite horizontal?
Angenommen, das schwebende Element, das zentriert werden soll, ist ein div mit 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 finden Sie eine gute Referenz dazu http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
Ich habe festgestellt, dass es am einfachsten ist, Text innerhalb eines Containers zu zentrieren und links auszurichten, und zwar wie folgt
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 das, wonach Sie gesucht haben, denn ich habe ziemlich lange gesucht, um diese ziemlich einfache Lösung zu finden.
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 entweder (je nachdem, was Sie vorhaben) Ränder verwenden, z. B. margin: 0 200px; , dies sollte Ihren Inhalt zentriert erscheinen lassen, Sie können auch die Antwort von Leyu auf meine Frage
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
