Kuidas tsentreerida pilte CSS-iga

Kas soovite pilti CSS-i abil tsentreerida? Joondamisprobleemid valmistavad veebidisaineritele sageli meelehärmi. Õnneks on pildi tsentreerimine CSS-iga väga lihtne ja me näitame teile, kuidas seda mõne sammuga teha.

Nagu paljude veebidisaini ülesannete puhul, on ka selle tegemiseks rohkem kui üks viis! Selles artiklis käsitleme kolme peamist meetodit. Alustame!

1. Kasutage marginaali omadust

Seadistades marginaal atribuut on üks lihtsamaid viise pildi horisontaalseks tsentreerimiseks CSS-i abil. Marginaalid on selle põhikomponent CSS-kasti mudel.

Esiteks peate muutma pildielemendi tekstisisesest elemendist plokkelemendiks. Plokitaseme HTML-elemendid hõivavad oma emaelemendi kogu laiuse ja on võimelised hõivama kogu lehe laiuse.

Kujutise elemendi plokielemendiks muutmisel saate seejärel selle positsiooni muuta, reguleerides selle horisontaalseid veerisid. Samuti peate määrama pildile konkreetse laiuse, et määrata, kui palju ruumi pilt lehel võtab.

Olenemata valitud laiusest peavad pildil olema võrdsed vasak- ja parempoolsed veerised. Seda on lihtne saavutada, kui annate marginaalile väärtuseks

auto:

img.center {
 kuva: plokk;
 margin-vasak: auto;
 margin-parem: auto;
 laius: 800 pikslit;
}

2. Kasutage Flexboxi paigutust

See meetod nõuab pildi panemist plokitaseme elemendisse, tavaliselt a div:

Kui olete selle teinud, saate selle välimusega manipuleerimiseks lisada mõned omadused. Kasutate kahte CSS-i atribuuti.

Esimene neist on kuva vara, mille väärtus on seatud painduv. Sa saad ka kasutage HTML-i elementide joondamiseks flexi. Teine atribuut, mille lisate oma divisjonile, on õigustama-sisu, mille väärtus on seatud Keskus nagu nii:

div.center {
 ekraan: flex;
 õigustama-sisu: keskus;
}

3. Kasutage aegunud keskuse elementi

Veebi parimad tavad soovitavad teil kasutada stiili kujundamisel CSS-i ja semantika jaoks HTML-i, seega ei tohiks te seda HTML-meetodit kasutada. The Keskus silt, mis tsentreerib selle sisu horisontaalselt, on HTML5-s aegunud.

Aga kui peate, siis siin on, kuidas pilti tsentreerida, kasutades ainult HTML-i. Lihtsalt mähkige img märgend keskmisel sildil, näiteks:

Nii saate oma pilte HTML-is joondada

Näidasime teile kolme erinevat hõlpsasti kasutatavat meetodit piltide tsentreerimiseks HTML-dokumenti. Proovige neid kõiki ja valige see, mis teile kõige paremini sobib. Vältige kolmandat meetodit, kui teil pole absoluutselt valikut!

Üks asi, mida meeles pidada, on see, et piltide tsentreerimiseks HTML-i ja CSS-i abil on veel palju võimalusi. Üks levinud meetod, mis töötab nii teksti kui ka tekstisiseste piltide puhul, on teksti joondamine vara.

Kuidas oma veebilehel teksti CSS-iga keskele joondada

Loe edasi

Autori kohta