CSS: Block zentrieren, Inhalt jedoch nach links ausrichten

81

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 :

http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c% 2f% 7c% 7c% 0d% 0a ++% 2f% 2f +% 7c% 7c ++% 7c% 7c __% 0d% 0a & type = python

Die ASCII-Kunst sollte zentriert sein (wie es scheint), aber sie sollte ausgerichtet sein und wie "YAML" aussehen.

Oder dieses :

http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23 % 0d% 0a% 0d% 0a% 3f +% 5b + New + York + Yankees% 2c% 0d% 0a ++++ Atlanta + Braves +% 5d% 0d% 0a% 3a +% 5b + 2001-07-02% 2c + 2001-08-12% 2c% 0d% 0a ++++ 2001-08-14 +% 5d% 0d% 0a

Die Fehlermeldung sollte alle wie in einer Konsole angezeigt werden.

css alignment center Paul Tarjan
quelle

Antworten:

162

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>
Erweitern Sie das Snippet

Keavon
quelle
5
Klar und effektiv. Vielen Dank!
Fuzzybear3965
11
funktioniert nicht, da sobald eine einzelne Textzeile 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, ist dies nicht der Fall spielt keine Rolle, da der Text NICHT die volle Breite des enthaltenen Blocks hat. Ein Beispiel finden Sie in Diagramm 2a von stackoverflow.com/questions/8702802/…
user3338098
Einfach und schön! Danke
Cesar Bielich
3
@ user3338098 Es funktioniert. In Ihrem Fall müssen Sie eine maximale Breite für Ihren Text festlegen, um zu verhindern, dass der Block auf eine unerwünschte Größe erweitert wird. Ich habe buchstäblich genau dieselbe Logik auf meine Arbeit angewendet und konnte Diagramm 1b + 2b erreichen.
Mark
20

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

Paul Tarjan
quelle
Funktioniert auch hervorragend mit dem "Wrap" -Wesen preund dem "Inhalt" code.
Serge Stroobandt
funktioniert nicht, da sobald 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/… .
user3338098
Vermeiden Sie negative Werte! Es funktioniert nicht in allen Browsern richtig.
Grasper
4

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;
eKek0
quelle
Also, was lege ich auf meine <pre> und <code>? Ich habe Variationen davon ausprobiert und bin gescheitert.
Paul Tarjan
Hast du versucht, eine CSS-Klasse zu verwenden?
eKek0
Sie können auch ein Container-Div für> pre>
eKek0
2
Ich versuche ein Container-Div, und der einzige Weg, es zum Laufen zu bringen, ist mit fester Breite (was ich nicht will).
Paul Tarjan
2

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

Waleed Eissa
quelle
Leider erzeugt Ihre Lösung einen Überlauf mit einer erzwungenen horizontalen Bildlaufleiste. Überlauf hinzufügen: Das übergeordnete Element ist nicht gut, da meine Ausgabe möglicherweise lang genug ist, um eine Bildlaufleiste zu rechtfertigen. Entschuldigung :(
Paul Tarjan
Eigentlich ist es nicht meine Lösung, wie ich bereits erwähnt habe, aber ich verstehe nicht, was Sie unter Überlauf verstehen: Verstecktes Erzwingen von Bildlaufleisten, es sollte Inhalte verbergen und keine Bildlaufleisten erzwingen.
Waleed Eissa
Die Lösung in Ihrem Beitrag verursacht eine horizontale Bildlaufleiste, da der Inhalt tatsächlich um 50% nach rechts verschoben ist. Dies erfordert einen Überlauf: versteckt zum Entfernen, was bei mir nicht funktioniert.
Paul Tarjan
2

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.

L.Gaunt
quelle
1 
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
Bernstein
quelle
Außerdem möchte ich nicht die Breite: 400px. möglich ohne das?
Paul Tarjan
Das Problem ist, dass ein Element auf Blockebene erweitert wird, um die größtmögliche Breite auszufüllen, sofern Sie keine Begrenzung festlegen.
Amber
Also, was ich tun möchte, ist unmöglich?
Paul Tarjan
Es könnte sein, dass jemand ein Geheimnis kennt, das mir nicht bekannt ist, aber meines Wissens ja.
Amber
Ich stimme Dav zu. Vielleicht werfen Sie einen Blick auf tinyMCE oder einen anderen Rich-Text-Editor, der mehr Anpassungsmöglichkeiten bietet als der Standard-HTML-Textbereich. Leider könnten Sie am Ende viel Zeit mit einem hackigen Ergebnis verbringen. Viel Glück!
mkelley33
1

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>
Erweitern Sie das Snippet

Ronnie Royston
quelle
-1

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>
user7212232
quelle
3
Können Sie Ihren Code und seine Vor- und Nachteile erklären? Auf diese Weise können andere daraus lernen, anstatt nur etwas zu kopieren und einzufügen, das sie möglicherweise vollständig verstehen oder nicht.
Robert