Ako responzívne zarovnať obrázky a text

Krok 2: Použite CSS

Na kontajneri:

• Teraz vycentrujte obsah použitím CSS na „ Kontajner ' trieda.
• Nastaviť ' flex 'hodnota nehnuteľnosti' displej “ na vytvorenie flexboxu.
• Nastaviť „align-items ” nehnuteľnosť do “ stred ” na vertikálne vycentrovanie zarovnania.
• Nastaviť ' ospravedlniť-obsah ” hodnotu vlastnosti na “centrovať”, aby sa zarovnanie vodorovne vycentrovalo.
• Nakoniec zadajte hodnotu „ stred 'do nehnuteľnosti' zarovnanie textu ” na stred textu.

Zapnuté :

• Uveďte „ max-šírka “vlastnosť na hodnotu” stred “, aby sa zabezpečilo, že obrázok sa zmení spolu s jeho kontajnerom.
• Zadajte hodnotu ' auto “ na “ výška ” vlastnosť na zachovanie pomeru strán obrázka.

Na texte:

• Nastavte veľkosť písma textu na „ 16 pixelov “ zadaním hodnoty „16px“ do „ veľkosť písma “.
• Definujte šírku textu priradením „ max-šírka “vlastnosť s hodnotou “ 390 pixelov “:

Je možné pozorovať, že text je vertikálne vycentrovaný a obrázok je horizontálne vycentrovaný:

Príklad 2: Zarovnajte text doľava a responzívny obrázok

V tomto príklade budú obrázok a text zarovnané doľava. Na tento účel postupujte podľa pokynov nižšie:

Krok 1: Vytvorte štruktúru HTML

HTML kód je rovnaký ako vyššie uvedený v príklade.

Krok 2: Použite CSS

Na kontajneri:

• Nastaviť ' flex-direction “hodnota nehnuteľnosti na “ stĺpec ” na vertikálne stohovanie položiek na malých obrazovkách.
• Nastaviť ' align-items “hodnota nehnuteľnosti na “ flexibilný štart ” doľava na zarovnanie položiek.
• Nakoniec nastavte vlastnosť „ zarovnanie textu “ na “ vľavo ” na zarovnanie textu doľava.

Zapnuté :

• Rovnaké ako vo vyššie uvedenom príklade.

Na texte:

• Rovnaké ako vo vyššie uvedenom príklade:

Výstup potvrdí, že text a obrázok sú zarovnané doľava:

Záver

Ak chcete zarovnať obrázky a text responzívne, najskôr vytvorte mriežkové alebo flexibilné rozloženie v CSS a potom nastavte „ align-item “hodnota nehnuteľnosti na “ stred “. Ak tak urobíte, zarovnajú sa obrázky a text responzívne v CSS. Tento zápis poskytol používateľom kompletný návod na zarovnanie obrázkov a textu.