Diese Frage hat hier bereits eine Antwort:

Ich versuche, zwei zu zentrierendiv Elemente nebeneinander in einer Reihe mit Flexbox display:flex).

Der Erstedivas @ -Element auf der linken Seite hat nur ein Bild.

Der Zweitedivas @ -Element auf der rechten Seite enthält linksbündigen Inline-Text von nicht angegebener Länge.

Wenn die Textzeile kurz genug ist, um auf eine Zeile zu passen, werden beide divs wie erwartet in der Mitte ausgerichtet und ausgerichtet.

Wenn die Textzeile lang genug ist, um zwei Zeilen umzubrechen, wird die zweitedivas Element @ umschließt den Inhalt nicht wie erwartet. Stattdessen verbleibt ein großer weißer Bereich auf der rechten Seite desdiv.

Ich habe hier ein Beispiel verspottet:http: //codepen.io/anon/pen/NGqYQX? editors = 110. Verändern Sie die Breite Ihres Browserfensters, um zu sehen, was ich meine.

Wie kann ich das zweite @ einstellediv Element, um sich selbst zu verkleinern und an den Text anzupassen, sodass beidediv Elemente erscheinen zentriert?

HTML:

<div class="flexbox-container">   
    <div class="div1">
        <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
    </div>
    <div class="div2">
        This is an example of a line of text.
    </div> 
</div>
<br>
<div class="flexbox-container">
    <div class="div1">
        <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
    </div>
    <div class="div2">
        This is an example of a much loooooooooooooonger line of text.
    </div>
</div>

CSS:

.flexbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.div1 {
  margin-right: 30px;
}

.div2 {
  font-size: 48px;
  line-height: 48px;
  text-align: left;
}

Hier ist ein Photoshop-Modell, das zeigt, was ich versuche zu tun: