Jak responzivně zarovnat obrázky a text

Krok 2: Použijte CSS

Na kontejneru:

• Nyní vycentrujte obsah použitím CSS na „ Kontejner “třída.
• Nastav ' flex 'hodnota nemovitosti' Zobrazit ” pro vytvoření flexboxu.
• Nastav „align-items „nemovitost do „ centrum ” hodnotu pro svislé vystředění zarovnání.
• Nastav ' ospravedlnit-obsah ” hodnotu vlastnosti na „centrovat“ pro horizontální vystředění zarovnání.
• Nakonec zadejte hodnotu „ centrum 'do nemovitosti' zarovnání textu ” pro vycentrování textu.

Na :

• Upřesněte „ max. šířka 'vlastnost na hodnotu' centrum “, abyste zajistili, že se velikost obrázku změní spolu s jeho kontejnerem.
• Zadejte hodnotu ' auto “ na “ výška ” vlastnost zachovat poměr stran obrazu.

Na textu:

• Nastavte velikost písma textu na „ 16px “ zadáním hodnoty „16px“ do „ velikost písma “.
• Definujte šířku textu přiřazením „ max. šířka 'vlastnost v hodnotě ' 390 pixelů “:

Lze pozorovat, že text je svisle vycentrován a obrázek je vycentrován vodorovně:

Příklad 2: Zarovnání textu a responzivního obrázku doleva

V tomto daném příkladu budou obrázek a text zarovnány doleva. Za tímto účelem postupujte podle níže uvedených pokynů:

Krok 1: Vytvořte strukturu HTML

HTML kód je stejný jako výše použitý v příkladu.

Krok 2: Použijte CSS

Na kontejneru:

• Nastav ' flex-direction “hodnota nemovitosti na “ sloupec ” pro svislé stohování položek na malých obrazovkách.
• Nastav ' zarovnat-položky “hodnota nemovitosti na “ flex-start ” doleva pro zarovnání položek.
• Nakonec nastavte vlastnost „ zarovnání textu “ na “ vlevo, odjet ” pro zarovnání textu doleva.

Na :

• Stejné jako ve výše uvedeném příkladu.

Na textu:

• Stejné jako ve výše uvedeném příkladu:

Výstup potvrdí, že text a obrázek jsou zarovnány doleva:

Závěr

Chcete-li zarovnat obrázky a text responzivně, nejprve vytvořte mřížku nebo rozvržení Flex v CSS a poté nastavte „ zarovnat-položka „hodnota vlastnosti na „ centrum “. Pokud tak učiníte, zarovnají se obrázky a text v CSS responzivně. Tento zápis poskytl uživatelům kompletní návod, jak reagovat obrázky a text.