Kako odzivno poravnati slike in besedilo

Kako Odzivno Poravnati Slike In Besedilo



Odzivna spletna stran lahko prilagaja velikost zaslona in dimenzije naprave, v kateri jo gledamo. Poleg odzivnosti spletne strani je nujno tudi, da so slike in besedilo usklajeni in odzivni. Poravnane slike so tiste, ki jih obdaja besedilo. Medtem ko je poravnano besedilo tisto, ki je videti kot cel odstavek.

Ta članek bo obravnaval metodo za odzivno poravnavo slik in besedila.





Kako odzivno poravnati slike in besedilo?

Vsebino, vključno s slikami in besedilom, je mogoče odzivno poravnati z uporabo Bootstrapa. Za predstavitev smo navedli dva primera:



Primer 1: Poravnajte besedilo navpično na sredino in sliko vodoravno



Najprej poskusite centrirati sliko vodoravno in besedilo navpično. V ta namen sledite spodnjim navodilom:



1. korak: Ustvarite strukturo HTML

Med ustvarjanjem strukture HTML najprej povežite » Bootstrap « in tudi zunanjo datoteko CSS. Po tem ustvarite a

vsebnik in vključite sliko z uporabo oznaka in besedilo:



< telo >
< div razred = 'posoda' >
< img src = 'testna-slika.jpg' vse = 'testna slika' >
< razred div = 'besedilo' > To je nekaj besedila. div >
div >
telo >

2. korak: Uporabite CSS

Na posodi:

  • Zdaj centrirajte vsebino tako, da uporabite CSS na ' Posoda ” razred.
  • Nastavite ' flex 'vrednost nepremičnine' zaslon ”, da ustvarite flexbox.
  • Nastavite »poravnaj-predmete » lastnina » center ” za navpično centriranje poravnave.
  • Nastavite ' justify-content ” vrednost lastnosti na “center” za horizontalno centriranje poravnave.
  • Na koncu navedite vrednost ' center »na nepremičnino« poravnava besedila ” za sredino besedila.

Vklopljeno :

  • Določite ' največja širina ' lastnost na vrednost ' center ”, da zagotovite, da se slika poveča skupaj z vsebnikom.
  • Določite vrednost ' avto ' do ' višina ” za ohranitev razmerja stranic slike.

Na besedilo:

  • Nastavite velikost pisave besedila na ' 16 slikovnih pik « tako, da podate vrednost »16px« za » velikost pisave ”.
  • Določite širino besedila tako, da dodelite ' največja širina ' lastnost vrednost ' 390 slikovnih pik ”:
.posoda {
zaslon: flex ;
poravnava besedila: sredina;
justify-content: center;
align-items: center;
}

img {
največja širina: 100 % ;
višina: avto;
}

.besedilo {
velikost pisave: 16px;
največja širina: 390 slikovnih pik;
}

Opazimo lahko, da je besedilo navpično centrirano, slika pa vodoravno centrirano:

2. primer: levo poravnajte besedilo in odzivno sliko

V tem primeru bosta slika in besedilo poravnana levo. V ta namen upoštevajte spodnja navodila po korakih:

1. korak: Ustvarite strukturo HTML

Koda HTML je enaka kot zgoraj, uporabljena v primeru.

2. korak: Uporabite CSS

Na posodi:

  • Nastavite ' flex-direction » vrednost lastnosti za « stolpec ” za navpično zlaganje predmetov na majhne zaslone.
  • Nastavite ' align-items » vrednost lastnosti za « flex-start ” na levo, da poravnate elemente.
  • Na koncu nastavite lastnost ' poravnava besedila ' do ' levo ” za levo poravnavo besedila.

Vklopljeno :

  • Enako kot v zgornjem primeru.

Na besedilo:

  • Enako kot v zgornjem primeru:
.posoda {
zaslon: flex ;
flex-direction: stolpec;
align-items: flex-start;
poravnava besedila: levo;
}

img {
največja širina: 100 % ;
višina: avto;
}

.besedilo {
velikost pisave: 16px;
največja širina: 390 slikovnih pik;
}

Izhod potrjuje, da sta besedilo in slika poravnana levo:

Zaključek

Za odzivno poravnavo slik in besedila najprej ustvarite mrežo ali upogibno postavitev v CSS, nato nastavite » align-item ' vrednost lastnosti za ' center ”. S tem boste slike in besedilo odzivno poravnali v CSS. Ta zapis je uporabnikom zagotovil popoln vodnik za odzivno poravnavo slik in besedila.

drugo

Kategorija

Priljubljene Objave

Rust Std::OS v Linuxu

Kateri so najboljši generatorji šal z umetno inteligenco?

Kako narediti začaran ščit za popolno obrambo v Minecraftu

AWS | Kako namestiti glasnost EBS

Kaj je ESP32-Pico-D4

Kako sestaviti predloge pozivov v LangChainu?

Kako uporabiti prelomne točke in medijske poizvedbe na mreži vrstic v Tailwindu?

Kako združiti sezname v Pythonu

Kako omogočiti in uporabljati dosegljivost na vašem iPhoneu

Vodnik za začetnike po večstopenjski gradnji Dockerja

PIR senzor gibanja z ESP32 z uporabo MicroPython in Thonny IDE

Funkcija Python bytes().

Kako uporabiti cmdlet Copy-ItemProperty za kopiranje lastnosti predmeta v lupini PowerShell?

Kako uporabljati Set-Service (Microsoft.PowerShell.Management)?

Kako izvoziti zaznamke iz Firefoxa

Kako blokirati ali dovoliti pojavna okna v Chromu v sistemu Android

Kako dovoliti pojavna okna v sistemu Android

Rezultati poizvedbe za razvrščanje MongoDB

Kako preveriti zgodovino Windows Update z uporabo PowerShell

Kako dodati podmodul v Git