So richten Sie Bilder und Text responsiv aus

Schritt 2: CSS anwenden

Auf dem Container:

• Zentrieren Sie nun den Inhalt, indem Sie das CSS auf „ Container ' Klasse.
• Stellen Sie „ biegen „Wert für die Immobilie“ Anzeige ” um eine Flexbox zu erstellen.
• Stellen Sie die ein „align-items ” Eigentum an die „ Center ”-Wert, um die Ausrichtung vertikal zu zentrieren.
• Stellen Sie „ Rechtfertigungsinhalt Geben Sie den Eigenschaftswert „center“ ein, um die Ausrichtung horizontal zu zentrieren.
• Geben Sie abschließend den Wert „ Center „zur Immobilie“ Textausrichtung ” um den Text zu zentrieren.

An :

• Präzisiere das ' maximale Breite „Eigenschaft zum Wert“ Center ”, um sicherzustellen, dass das Bild zusammen mit seinem Container skaliert wird.
• Geben Sie den Wert „ Auto ' zum ' Höhe ”-Eigenschaft, um das Seitenverhältnis des Bildes beizubehalten.

Zum Text:

• Stellen Sie die Schriftgröße des Textes auf „ 16px ” durch Angabe des Werts „16px“ für „ Schriftgröße “.
• Definieren Sie die Textbreite, indem Sie „ maximale Breite „Eigenschaft einen Wert von“ 390px ”:

Es ist zu beobachten, dass der Text vertikal zentriert ist und das Bild horizontal zentriert ist:

Beispiel 2: Richten Sie den Text und das responsive Bild linksbündig aus

In diesem Beispiel werden das Bild und der Text linksbündig ausgerichtet. Gehen Sie zu diesem Zweck die folgenden schrittweisen Anweisungen durch:

Schritt 1: Erstellen Sie eine HTML-Struktur

Der im Beispiel verwendete HTML-Code ist derselbe wie oben.

Schritt 2: CSS anwenden

Auf dem Container:

• Stellen Sie „ Flex-Richtung „Immobilienwert zu“ Spalte ”um Elemente vertikal auf kleinen Bildschirmen zu stapeln.
• Stellen Sie „ align-items „Immobilienwert zu“ Flex-Start ” nach links, um die Elemente auszurichten.
• Als letztes legen Sie die Eigenschaft „ Textausrichtung ' zum ' links ”-Eigenschaft, um den Text linksbündig auszurichten.

An :

• Dasselbe wie im obigen Beispiel verwendet.

Zum Text:

• Dasselbe wie im obigen Beispiel verwendet:

Die Ausgabe bestätigt, dass Text und Bild linksbündig ausgerichtet sind:

Abschluss

Um Bilder und Text responsiv auszurichten, erstellen Sie zunächst ein Raster- oder Flex-Layout in CSS und legen Sie dann das „ align-item „ Immobilienwert zum „ Center “. Dadurch werden Bilder und Text responsiv in CSS ausgerichtet. Dieser Artikel stellt den Benutzern eine vollständige Anleitung zum responsiven Ausrichten von Bildern und Texten zur Verfügung.