kas sa tahaksid teada, kuidas pildi keskele DIV? Pildi tsentreerimine DIV-is võib olla kasulik teie veebilehe välimuse ja korralduse parandamiseks ning kuvatava pildi esiletõstmiseks. Keskenduge pilt DIV-s pole keeruline, kuid see sõltub mitmest tegurist, nagu pildi tüüp, DIV suurus, DIV stiil jne.
Selles artiklis me selgitame kuidas HTML-i ja CSS-i abil pilt DIV-is tsentreerida, mis on programmeerimiskeeled, mida kasutatakse veebilehtede loomiseks ja kujundamiseks. Näitame teile mitmeid meetodeid ja näiteid, et saaksite valida endale sobivaima.
Mis on DIV
Div on HTML-i element, mida kasutatakse luua veebilehel jaotisi või konteinereid. See võib sisaldada muid elemente, näiteks teksti, pilte, linke jne. Samuti on see plokkelement, mis tähendab, et see võtab enda alla kogu lehe laiuse ja nii saate määrata selle kõrguse ja laiuse. Div on üldine element, mis tähendab, et sellel puudub konkreetne semantiline tähendus. Sel põhjusel kasutatakse seda tavaliselt atribuutidega class või id, et anda div-le nimi või kategooria. Seda kasutatakse sageli ka koos stiili atribuudiga või CSS-i stiililehtedega, et anda divisjonile välimus või kujundus.
Div kasutatakse veebilehe sisu korraldamiseks ja struktureerimiseks ning sellele stiiliomaduste rakendamiseks. Divi abil saate luua kasti, mis sisaldab muid elemente ja mida saab joondada, tsentreerida, värvida, varjutada jne. Vormingut saab kasutada ka luua veerge või ridu, et levitada sisu korrapäraselt ja paindlikult. Üldiselt saab seda kasutada ka visuaalsete või interaktiivsete efektide loomiseks, nagu animatsioonid, üleminekud, teisendused jne.
Kuidas pilti horisontaalselt tsentreerida
Tsentreerige pilt horisontaalselt DIV-is tähendab pildi joondamist keskele DIV laius. Selleks on mitu võimalust, kuid kõige levinumad on järgmised.
- Kasutades atribuuti text-align: center. Seda omadust rakendatakse elemendile DIV ja kõik DIV-i elemendid joonduvad horisontaalselt keskele. Näiteks:
- Kasutage marginaali: auto omadus. Seda omadust rakendatakse IMG-elemendile ja see põhjustab kujutisel samad vasak- ja parempoolsed veerised, tsentreerides selle horisontaalselt. Selle toimimiseks peab kujutisel olema määratletud laius ja tüüp block või atribuut display: block. Näiteks:
- Kasutades teisendusatribuuti: translateX(). Seda omadust rakendatakse IMG-elemendile ja see põhjustab kujutise horisontaalse liikumise teatud kaugusel algsest asendist. Selle horisontaalseks tsentreerimiseks peate seda nihutama 50% laiusest paremale. Selle toimimiseks peab kujutisel olema määratletud laius ja tüüp block või atribuut display: block. Näiteks:
Kuidas pilti vertikaalselt tsentreerida
Tsentreerige pilt vertikaalselt DIV-is tähendab pildi joondamist DIV kõrguse keskele. Selleks on mitu võimalust, kuid kõige levinumad on järgmised.
- Vertikaalse joonduse atribuudi kasutamine: keskmine. Seda omadust rakendatakse IMG-elemendile ja see joondab kujutise teksti baasjoone suhtes vertikaalselt keskele. Selle toimimiseks peab DIV-elemendil olema määratletud kõrgus ja IMG-elemendil peab olema tüüp inline või atribuut display: inline. Näiteks:
- Kasutades atribuuti margin-top ja margin-bottom. Neid omadusi rakendatakse IMG-elemendile ja nende ülemine ja alumine veeris on samad, tsentreerides selle vertikaalselt. Töötamiseks peab elemendil DIV olema määratletud kõrgus ja IMG elemendil peab olema määratletud kõrgus ning see peab olema tüüpi block või omama atribuuti display: block. Näiteks:
- Teisenduse atribuudi kasutamine: translateY(). Seekord rakendatakse seda IMG-elemendile ja see põhjustab kujutise vertikaalse liikumise teatud kaugusel algsest asendist. Selle vertikaalseks tsentreerimiseks peate seda nihutama 50% kõrgusest allapoole. Töötamiseks peab elemendil DIV olema määratletud kõrgus ja IMG elemendil peab olema määratletud kõrgus ning see peab olema tüüpi block või omama atribuuti display: block. Näiteks:
Kuidas pilti tsentreerida mõlemal teljel
Kujutise tsentreerimine DIV-s mõlemale teljele tähendab joondage pilt nii laiuse kui ka kõrgusega keskele DIV-ist on see kõige keerulisem. Selleks on mitu võimalust, kuid kõige levinumad on järgmised.
- Kasutades atribuuti text-align: center ja atribuuti vertikaaljoondus: keskmine. Need omadused kehtivad vastavalt DIV- ja IMG-elemendile ning põhjustavad pildi keskjoondamise nii horisontaalselt kui ka vertikaalselt. Selle toimimiseks peab DIV-elemendil olema määratletud kõrgus ja IMG-elemendil peab olema tüüp inline või atribuut display: inline. Näiteks:
- Kasutage marginaali: auto omadus. Siin rakendatakse seda IMG-elemendile ja see põhjustab kujutise kõigil neljal küljel võrdsed veerised, tsentreerides selle mõlemale teljele. Töötamiseks peab elemendil DIV olema määratletud kõrgus ning IMG elemendil peab olema määratletud laius ja kõrgus ning see peab olema tüüpi block või omama atribuuti display: block. Näiteks:
- Kasutades atribuuti teisendus: translate(). Sel juhul rakendatakse seda IMG elemendile ja see põhjustab kujutise nihkumise oma algsest asendist teatud kaugusele mõlemal teljel. Selle tsentreerimiseks peate seda nihutama 50% selle laiusest paremale ja 50% kõrgusest allapoole. Töötamiseks peab elemendil DIV olema määratletud kõrgus ning IMG elemendil peab olema määratletud laius ja kõrgus ning see peab olema tüüpi block või omama atribuuti display: block. Näiteks:
Keskendage mis tahes pilt
Pildi tsentreerimine DIV-is võib olla kasulik et parandada oma veebisaidi välimust ja korraldustja kuvatava pildi esiletõstmiseks. Pildi tsentreerimine DIV-is ei ole keeruline, kuid see sõltub mitmest tegurist, nagu pildi tüüp, DIV-i suurus, DIV-i stiil jne.
Selles artiklis oleme selgitanud, kuidas HTML-i ja CSS-i abil pilt DIV-is tsentreerida, mis on programmeerimiskeeled, mida kasutatakse veebilehtede loomiseks ja kujundamiseks. Oleme teile näidanud mitmeid meetodeid ja näiteid, et saaksite valida see, mis teile kõige paremini sobib.
Loodame, et teile meeldis see artikkel ja õppisite, kuidas DIV-is pilti tsentreerida. Kui teil on küsimusi või ettepanekuid, jätke meile kommentaar. Saate seda artiklit jagada ka oma sõprade või perega, kellele see samuti meeldib HTML või CSS. Asume tööle ja ajakava järgi!