Kā centrēt attēlus, izmantojot CSS

Vai vēlaties centrēt attēlu, izmantojot CSS? Izlīdzināšanas problēmas bieži vien ir tīmekļa dizaineru neapmierinātības avots. Par laimi attēla centrēšana ar CSS ir ļoti vienkārša, un mēs jums parādīsim, kā to izdarīt dažās darbībās.

Tāpat kā ar daudziem tīmekļa dizaina uzdevumiem, ir vairāk nekā viens veids, kā to paveikt! Šajā rakstā mēs apskatīsim trīs galvenās metodes. Sāksim!

1. Izmantojiet piemales rekvizītu

Iestatīšana starpība Īpašums ir viens no vienkāršākajiem veidiem, kā horizontāli centrēt attēlu, izmantojot CSS. Rezerves ir galvenā sastāvdaļa CSS kastes modelis.

Pirmkārt, jums ir jāpārveido attēla elements no iekļautā uz bloku. Bloka līmeņa HTML elementi aizņem visu vecā elementa platumu un spēj aizņemt visu lapas platumu.

Padarot attēla elementu par bloka elementu, varat manipulēt ar tā pozīciju, pielāgojot tā horizontālās piemales. Jums būs arī jāiestata konkrēts attēla platums, lai noteiktu, cik daudz vietas attēls aizņem lapā.

Neatkarīgi no izvēlētā platuma attēla kreisās un labās malas būs vienādas. To var viegli sasniegt, piešķirot maržas īpašuma vērtību auto:

img.center {
 displejs: bloks;
 piemale-kreisais: auto;
 margin-right: auto;
 platums: 800 pikseļi;
}

2. Izmantojiet Flexbox izkārtojumu

Šī metode prasa attēla ievietošanu bloka līmeņa elementā, parasti a div:

Kad tas ir izdarīts, varat pievienot dažus rekvizītus, lai manipulētu ar tā izskatu. Jūs izmantosit divus CSS rekvizītus.

Pirmais ir displejs īpašums ar iestatīto vērtību flex. Jūs varat arī izmantojiet flex, lai izlīdzinātu elementus HTML. Otrais īpašums, ko pievienosit savam div, ir attaisnot-saturs, kura vērtība ir iestatīta uz centrs kā tā:

div.center {
 displejs: flex;
 attaisnot-saturs: centrs;
}

3. Izmantojiet novecojušo centra elementu

Tīmekļa paraugprakse mudina izmantot CSS stila veidošanai un HTML semantikai, tāpēc nevajadzētu izmantot šo HTML metodi. The centrs tags, kas centrē tā saturu horizontāli, ir novecojis HTML5.

Bet, ja nepieciešams, šeit ir norādīts, kā centrēt attēlu, izmantojot tikai HTML. Vienkārši iesaiņojiet img tags centrālajā tagā, piemēram:

Lūk, kā izlīdzināt attēlus HTML

Mēs esam parādījuši trīs dažādas, viegli lietojamas metodes attēlu centrēšanai HTML dokumentā. Izmēģiniet tos visus un izvēlieties sev piemērotāko. Izvairieties no trešās metodes, ja vien jums nav absolūti nekādas izvēles!

Viena lieta, kas jāpatur prātā, ir vēl daži veidi, kā centrēt attēlus, izmantojot HTML un CSS. Viena izplatīta metode, kas darbojas gan tekstam, gan iekļautajiem attēliem, ir teksta līdzināšana īpašums.

Kā centrēt tīmekļa lapas tekstu, izmantojot CSS

Lasiet Tālāk

Par autoru