Responzivno web mjesto može prilagoditi veličinu zaslona i dimenzije uređaja na kojem se pregledava. Uz responzivnost web stranice, potrebno je i da slike i tekst budu usklađeni i responzivni. Poravnane slike su one koje omotavaju tekst oko sebe. Dok je poravnati tekst onaj koji izgleda kao cijeli paragraf.
Ovaj će članak razmotriti metodu responzivnog poravnavanja slika i teksta.
Kako responzivno poravnati slike i tekst?
Sadržaj uključujući slike i tekst može se responzivno poravnati pomoću Bootstrapa. Da bismo pružili demonstraciju, naveli smo dva primjera:
Primjer 1: Centrirajte tekst okomito, a sliku vodoravno
Prvo pokušajte centrirati sliku vodoravno, a tekst okomito. U tu svrhu slijedite dolje navedene upute:
Korak 1: Napravite HTML strukturu
Dok stvarate HTML strukturu, prvo povežite ' Bootstrap ”, a također i vanjsku CSS datoteku. Nakon toga kreirajte a Korak 2: Primijenite CSS Na kontejneru: Na Na tekstu: Može se uočiti da je tekst okomito centriran, a slika vodoravno centrirana: Primjer 2: Lijevo poravnanje teksta i responzivne slike U ovom primjeru, slika i tekst bit će poravnati lijevo. U tu svrhu prođite dolje navedene upute korak po korak: Korak 1: Napravite HTML strukturu HTML kod je isti kao gore, korišten u primjeru. Korak 2: Primijenite CSS Na kontejneru: Na Na tekstu: Izlaz potvrđuje da su tekst i slika lijevo poravnati: Da biste slike i tekst responzivno poravnali, prvo izradite rešetkasti ili fleksibilni izgled u CSS-u, a zatim postavite ' align-item ' vrijednost svojstva za ' centar ”. Na taj način će se slike i tekst u CSS-u responzivno poravnati. Ovaj zapis je korisnicima pružio potpuni vodič za responzivno poravnavanje slika i teksta. oznaka i tekst:
< tijelo >
< div razreda = 'kontejner' >
< img src = 'testna-slika.jpg' sve = 'testna slika' >
< div klasa = 'tekst' > Ovo je neki tekst. div >
div >
tijelo >
:
.kontejner {
prikaz: savijati ;
poravnanje teksta: središte;
justify-content: centar;
align-items: center;
}
img {
maksimalna širina: 100 % ;
visina: auto;
}
.tekst {
veličina fonta: 16px;
max-width: 390px;
}
:
.kontejner {
prikaz: savijati ;
smjer savijanja: stupac;
align-items: flex-start;
poravnanje teksta: lijevo;
}
img {
maksimalna širina: 100 % ;
visina: auto;
}
.tekst {
veličina fonta: 16px;
max-width: 390px;
}
Zaključak