CSS: Block zentrieren, aber Inhalt nach links ausrichten

Question

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 :

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-Grafik sollte zentriert sein (wie sie erscheint), aber sie sollte in einer Linie stehen und wie "YAML" aussehen.

Oder dies:

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

sollte die Fehlermeldung wie in der Konsole angezeigt werden.

Answer 1

<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>

Answer 2

Ist es das, wonach Sie suchen? 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>

Answer 3

Für diejenigen unter uns, die noch mit älteren Browsern arbeiten, gibt es eine erweiterte Abwärtskompatibilität:

<div style="text-align: center;">
    <div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
        Line 1: Testing<br>
        Line 2: More testing<br>
        Line 3: Even more testing<br>
    </div>
</div>

Teilweise inspiriert durch diesen Beitrag: https://stackoverflow.com/a/12567422/14999964 .

Answer 4

DIES 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>