webentwicklung-frage-antwort-db.com.de

CSS: Block zentrieren, Inhalt jedoch nach links ausrichten

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 in einer Linie stehen 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 wie in einer Konsole angezeigt werden.

62
Paul Tarjan

Umbuchen der funktionierenden Antwort von der anderen Frage: Wie kann ein schwebendes Element mit variabler Breite horizontal zentriert werden?

Angenommen, das schwebende und zentrierte Element ist ein div mit einem 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 ein guter Hinweis dazu http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats

17
Paul Tarjan

Erstellen Sie zunächst ein übergeordnetes div, dessen untergeordneter Inhalt mit text-align: center Zentriert wird. Erstellen Sie als Nächstes ein untergeordnetes div, das mit display: inline-block Die Breite seiner untergeordneten Elemente anpasst, und text-align: left, Damit der Inhalt, den es enthält, wie gewünscht linksbündig ausgerichtet wird.

<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>
127
Keavon

Wenn ich Sie gut verstehe, müssen Sie verwenden, um einen Container (oder Block) zu zentrieren

margin-left: auto;
margin-right: auto;

und links den Inhalt ausrichten:

text-align: left;
3
eKek0

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 tun möchten), etwa margin: 0 200px; Sollte dies dazu führen, dass Ihr Inhalt zentriert erscheint, könnten Sie auch die Antwort von Leyu auf meine Frage sehen

2
Waleed Eissa

Der einfachste Weg, Text in einem Container zu zentrieren und linksbündig auszurichten, ist der folgende:

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
}

Hoffe, Sie haben genau nach dieser Lösung gesucht, da ich ziemlich lange gesucht habe, um diese ziemlich einfache Lösung zu finden.

1
L.Gaunt

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>
1
Ron Royston
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
1
Amber