it-swarm.com.de

Wie kann ich linksbündigen Text zentrieren, auch wenn er umbrochen wird?

Ich muss einen Block linksbündigen Textes innerhalb eines div zentrieren, aber ich muss die visuelle Breite des Textblocks zentrieren, nicht den Block selbst.

In vielen Fällen kann dies dasselbe sein, denken Sie jedoch an einen Fall, bei dem das div ziemlich schmal ist (denken Sie an mobile Breiten) und der Text zu lang ist, um in eine Zeile zu passen. Daher muss er überlaufen.

In den folgenden Beispielen zeige ich den Textblock zur Veranschaulichung als hellblau, aber in der Praxis haben sie dieselbe Farbe wie das übergeordnete div (weiß). Es gibt auch keine Zeilenumbrüche in dem verwendeten Text.

enter image description here

Im 1a ist der Text nur eine Zeile und er ist kleiner als die maximale Breite des Textblocks. Daher kann ich den Textblock auf die Breite des Textes einstellen und es gibt kein Problem.

In 2a ist der Text jedoch länger als die maximale Breite und wird daher in die nächste Zeile umgebrochen. Dies hat zur Folge, dass der sichtbare Textblock nicht mehr zentriert erscheint.

Wie kann ich beide Situationen als 1b und 2b nur mit HTML und CSS anzeigen?

Edit 1: Es scheint, dass jeder mir sagt, wie ich die Situation in 1a und 2a erreichen kann, aber das habe ich bereits. Ich möchte die Situation in 1b und 2b erreichen. 

Edit 2: Der Code, den ich verwende, entspricht im Wesentlichen dem, den David in seinem Link angegeben hat ( http://jsfiddle.net/davidThomas/28aef/ ). Die Verwendung einer Farbe für den Textbereich soll diesen Punkt jedoch nur veranschaulichen. Wenn Sie dies in weiß ändern ( http://jsfiddle.net/28aef/2/ ), können Sie sehen, wie der Textblock nicht mehr zentriert aussieht (d. H. Linke und rechte Ränder sind nicht gleich).

30
JohnGB

Ich weiß, das ist alt, aber ich hatte gerade das gleiche Problem, und ich stimme zu, dass keiner von ihnen das löst. Dieser Browser ist möglicherweise nicht zu 100% Cross-Browser (wurde nicht getestet), aber er funktioniert!

Die Einschränkung besteht nun darin, dass Sie den Zeilenumbruch selbst vornehmen müssen, aber es scheint, dass dies unabhängig von dieser Situation getan werden muss.

http://jsfiddle.net/28aef/2/

div.textContainer {
    text-align: center;
    border: 1px solid #000;
    height: 100px;
    padding: 10px 0;
}

div.textContainer p {
    display: inline-block;
    text-align: left;
}
12
John

Flexbox kann gut sein:

  .d-flex {
      display: -ms-flexbox!important;
      display: flex!important;
  }
  .flex-column {
      -ms-flex-direction: column!important;
      flex-direction: column!important;
  }
  .ml-auto, .mx-auto {
      margin-left: auto!important;
  }
  mr-auto, .mx-auto {
      margin-right: auto!important;
  }
  .w-50 {
      width: 50%!important;
  }
<div class="d-flex flex-column mx-auto w-50">
  <p>Left aligned text</p>
  <p><em>Aenean sed lectus massa, quis fringilla magna. Morbiporta sapien quis ligula viverra condimentum non vel nunc. Ut ac pulvinar nibh. Sed vitae eros et purus ullamcorper fermentum eu a libero. Curabitur vitae dolor ligula, varius tincidunt arcu. Quisque lectus magna, semper sed tincidunt nec, mattis vel justo.</em></p>
  <p>Using <a href="https://getbootstrap.com/docs/4.1/utilities/flex/">Bootstrap 4</a> classes.</p>
</div>

1
kwaaui

Ich vermute, das ist für das Originalposter längst kein Thema mehr geworden, aber ich hatte die gleiche Frage und googelte nach einer Antwort. Unten ist das Ergebnis von dem, was ich gefunden habe.

Haftungsausschluss: Ich bin kein Experte in diesem Bereich und andere haben vielleicht eine elegantere Art, mit dieser Situation umzugehen, aber es funktionierte für meine Anwendung und für andere Anwendungen. Ich dachte mir, ich würde es veröffentlichen.

<div style = "text-align: center; margin-left: 10%; margin-right: 10%">
    <div style = "display: inline-block; text-align: left;">
        Desired text goes here.
    </div>
</div>

Beachten Sie, dass das erste Div möglicherweise nicht benötigt wird und die Ränder mit wenig Änderung in das zweite Div verschoben werden können. Passen Sie die Prozentsätze nach Bedarf an, oder geben Sie eine Pixelbreite an, und Sie sollten alle Einstellungen vornehmen. Hoffentlich spart dies jemandem irgendwann Zeit und erstellt keine neuen Probleme. Viel Glück alle.

0
Lokipiece

Ich weiß, das ist alt, aber es wurde nicht beantwortet. Dies kann zumindest mit calc () vh und vw (Viewport-Einheiten) und etwas Mathe .. geschehen. Der Trick scheint die linke und obere Mitte manuell etwas zu zentrieren. Ich habe Viewport-Einheiten für ihre Genauigkeit und sich ständig ändernde Wirkung verwendet.

    .clr	{ clear:both; }
    .bg666	{ background:#666;}  
    .bgf4	{ background: #f4f4f4; }
    .hv60	{ height: 60vh; }
    .hv50	{ height: 50vh; }
    .wv60	{ width: 60vw; }
    .wv50	{ width: 50vw; }
    .tlset	{ position:relative; left: 30px; top: 30px; }
    .true_cntr_inner { position:relative; left: calc(60vw - 50vw - 5vw);  top: calc(60vh - 50vh - 5vh); } /* left = (60% - 50% of inner block / 2);*/
    <div class = 'clr wv60 hv60 bg666 tlset'>
        <div class = 'clr wv50 hv50 true_cntr_inner bgf4'>
            this is some text that spans acrossed 50% of the viewport. 
            I state the obvious because I believe people can see the obvious and I 
            was wrong a lot. Now it has become somewhat of a habit like bad spelling 
            so forgive me. 
        </div>
    </div>

Ich suchte nach einer Lösung zum Zentrieren und Ändern der Größe meines Textes, der DIV enthält, bei der Fenstergröße. Ich stieß auf diesen Beitrag und fand meine Problemumgehung, nachdem mir klar wurde, dass es ein Problem mit der normalen CENTER-Methode gab. Ich hoffe, es hilft.

0
JSG