Naučite se centrirati sliko v DIV s HTML in CSS

programiranje z div

bi radi vedeli, kako centrirajte sliko v DIV? Centriranje slike v DIV je lahko koristno za izboljšanje videza in organizacije vaše spletne strani ter za poudarjanje slike, ki jo želite prikazati. Centrirajte sliko v DIV ni težko, vendar je odvisno od več dejavnikov, kot so vrsta slike, velikost DIV-a, slog DIV-a itd.

V tem članku bomo razložili kako centrirati sliko v DIV z uporabo HTML in CSS, ki so programski jeziki, ki se uporabljajo za ustvarjanje in oblikovanje spletnih strani. Pokazali vam bomo več metod in primerov, da boste lahko izbrali tisto, ki vam najbolj ustreza.

Kaj je DIV

računalniško kodiranje

Div je element HTML, ki se uporablja za ustvarite razdelke ali vsebnike na spletni strani. To lahko vsebuje druge elemente, kot so besedilo, slike, povezave itd. Poleg tega je to blok element, kar pomeni, da zavzema celotno širino strani in to lahko določite njegovo višino in širino. Div je splošen element, kar pomeni, da nima posebnega semantičnega pomena. Zaradi tega se običajno uporablja z atributoma razreda ali id, da se divu dodeli ime ali kategorija. Pogosto se uporablja tudi z atribut sloga ali s slogovnimi listi CSS, če želite dati videz ali postavitev div.

Div se uporablja za organiziranje in strukturiranje vsebine spletne strani ter za uporabo slogovnih lastnosti zanjo. Z divom lahko ustvarite polje, ki vsebuje druge elemente in ki ga je mogoče poravnati, centrirati, barvati, senčiti itd. Format se lahko uporablja tudi za ustvarite stolpce ali vrstice, za distribucijo vsebine na urejen in prilagodljiv način. Na splošno se lahko uporablja tudi za ustvarjanje vizualnih ali interaktivnih učinkov, kot so animacije, prehodi, transformacije itd.

Kako centrirati sliko vodoravno

Oseba, ki uporablja python

Centrirajte sliko vodoravno v DIV pomeni poravnati sliko na sredino širine DIV. Obstaja več načinov za to, najpogostejši pa so naslednji:

  • Uporabite lastnost text-align: center. Ta lastnost se uporabi za element DIV in povzroči, da so vsi elementi v DIV vodoravno poravnani na sredino. Na primer:

  • Uporabite rob: samodejno lastnost. Ta lastnost je uporabljena za element IMG in povzroči, da ima slika enake levi in ​​desni rob ter jo centrira vodoravno. Da bi to delovalo, mora imeti slika določeno širino in biti tipa block ali imeti lastnost display: block. Na primer:

  • Uporaba lastnosti transformacije: translateX(). Ta lastnost se uporabi za element IMG in povzroči, da se slika premakne vodoravno za določeno razdaljo od prvotnega položaja. Če ga želite centrirati vodoravno, ga morate premakniti za 50 % širine v desno. Da bi delovala, mora imeti slika določeno širino in biti tipa block ali imeti lastnost display: block. Na primer:

Kako centrirati sliko navpično

Računalniško kodiranje

Centrirajte sliko navpično v DIV pomeni poravnati sliko na sredino višine DIV. Obstaja več načinov za to, najpogostejši pa so naslednji:

  • Uporabite lastnost vertical-align: middle. Ta lastnost se uporabi za element IMG in povzroči, da je slika navpično poravnana na sredino glede na osnovno črto besedila. Da bi to delovalo, mora imeti element DIV določeno višino, element IMG pa mora biti tipa inline ali lastnost display: inline. Na primer:

  • Uporaba lastnosti margin-top in margin-bottom. Te lastnosti so uporabljene za element IMG in povzročijo, da ima slika enake robove na vrhu in na dnu, kar jo centrira navpično. Da bi to delovalo, mora imeti element DIV določeno višino, element IMG pa mora imeti definirano višino in biti tipa block ali lastnost display: block. Na primer:

  • Uporabite lastnost transformacije: translateY(). Tokrat se uporabi za element IMG in povzroči, da se slika premakne navpično za določeno razdaljo od prvotnega položaja. Če ga želite centrirati navpično, ga morate premakniti za 50 % njegove višine navzdol. Da bi to delovalo, mora imeti element DIV določeno višino, element IMG pa mora imeti definirano višino in biti tipa block ali lastnost display: block. Na primer:

Kako centrirati sliko na obeh oseh

Programiranje na dveh zaslonih

Centriranje slike na obeh oseh v DIV pomeni poravnajte sliko na sredino širine in višine DIV je to najbolj zapleteno. Obstaja več načinov za to, najpogostejši pa so naslednji:

  • Uporabite lastnost text-align: center in lastnost vertical-align: middle. Te lastnosti veljajo za element DIV oziroma element IMG in povzročijo, da je slika sredinsko poravnana vodoravno in navpično. Da bi to delovalo, mora imeti element DIV določeno višino, element IMG pa mora biti tipa inline ali lastnost display: inline. Na primer:

  • Uporabite rob: samodejno lastnost. Tu se uporabi za element IMG in poskrbi, da ima slika enake robove na vseh štirih straneh, kar jo centrira na obeh oseh. Da bi to delovalo, mora imeti element DIV določeno višino, element IMG pa mora imeti definirano širino in višino ter biti tipa block ali lastnost display: block. Na primer:

  • Uporabite lastnost transform: translate().. V tem primeru se uporabi za element IMG in povzroči, da se slika premakne za določeno razdaljo od prvotnega položaja v obeh oseh. Če ga želite centrirati, ga morate premakniti za 50 % njegove širine v desno in 50 % njegove višine navzdol. Za delovanje mora imeti element DIV definirano višino, element IMG pa mora imeti definirano širino in višino ter biti tipa block ali imeti lastnost display: block. Na primer:

Centrirajte poljubno sliko

Opravilna vrstica in zbirka podatkov

Centriranje slike v DIV je lahko koristno za izboljšanje videza in organizacije vaše spletne straniin označite sliko, ki jo želite prikazati. Centriranje slike v DIV ni težko, vendar je odvisno od več dejavnikov, kot so vrsta slike, velikost DIV, slog DIV itd.

V tem članku Pojasnili smo, kako centrirati sliko v DIV z uporabo HTML in CSS, ki so programski jeziki, ki se uporabljajo za ustvarjanje in oblikovanje spletnih strani. Pokazali smo vam več metod in primerov, tako da lahko izbirate tisti, ki vam najbolj ustreza.

Upamo, da vam je bil ta članek všeč in da ste se naučili centrirati sliko v DIV. Če imate kakršna koli vprašanja ali predloge, nam pustite komentar. Ta članek lahko delite tudi s prijatelji ali družino, ki jim je prav tako všeč HTML ali CSS. Lotimo se dela in programiranja!


Pustite svoj komentar

Vaš e-naslov ne bo objavljen. Obvezna polja so označena z *

*

*

  1. Za podatke odgovoren: Miguel Ángel Gatón
  2. Namen podatkov: Nadzor neželene pošte, upravljanje komentarjev.
  3. Legitimacija: Vaše soglasje
  4. Sporočanje podatkov: Podatki se ne bodo posredovali tretjim osebam, razen po zakonski obveznosti.
  5. Shranjevanje podatkov: Zbirka podatkov, ki jo gosti Occentus Networks (EU)
  6. Pravice: Kadar koli lahko omejite, obnovite in izbrišete svoje podatke.