Kā centrēt attēlu vertikāli un horizontāli, izmantojot CSS

Daudzi izstrādātāji cīnās, strādājot ar attēliem. Darbs ar atsaucību un izlīdzināšanu ir īpaši grūts, jo īpaši centrējot attēlu lapas vidū.

Tāpēc šajā ziņojumā es parādīšu dažus no visbiežāk izmantotajiem veidiem, kā centrēt attēlu gan vertikāli, gan horizontāli, izmantojot dažādas CSS īpašības.

Esmu pārskatījis CSS pozīcijas un displeja rekvizītus savā iepriekšējā ierakstā. Ja jums nav zināmas šīs īpašības, pirms šī raksta lasīšanas iesaku pārbaudīt šīs ziņas.

Lūk, video versija, ja vēlaties to pārbaudīt:

Attēla centrēšana horizontāli

Sāksim ar attēla centrēšanu horizontāli, izmantojot 3 dažādas CSS īpašības.

Teksta izlīdzināšana

Pirmais veids, kā centrēt attēlu horizontāli, ir text-alignrekvizīta izmantošana. Tomēr šī metode darbojas tikai tad, ja attēls atrodas bloka līmeņa konteinerā, piemēram :

 div { text-align: center; } 

Marža: automātiska

Cits attēla centrēšanas veids ir margin: autorekvizīta izmantošana (kreisajai un labajai malai).

Tomēr margin: autoattēlu lietošana nedarbosies tikai atsevišķi. Ja jums ir jāizmanto margin: auto, jums ir jāizmanto arī 2 papildu īpašības.

Rekvizīts margin-auto neietekmē teksta līmeņa elementus. Tā kā tags ir iekļauts elements, mums tas vispirms jāpārvērš par bloka līmeņa elementu:

img { margin: auto; display: block; }

Otrkārt, mums ir jādefinē arī platums. Tātad kreisās un labās malas var aizņemt atlikušo tukšo vietu un automātiski izlīdzināt sevi, kas to izdara (ja vien mēs nedodam tai 100% platumu):

img { width: 60%; margin: auto; display: block; }

Displejs: Flex

Trešais veids, kā centrēt attēlu horizontāli, ir display: flex. Tāpat kā mēs izmantojām text-alignīpašumu konteineram, mēs izmantojam display: flexarī konteineram.

Tomēr ar lietošanu display: flexvien nepietiks. Konteineram ir jābūt arī papildu rekvizītam ar nosaukumu justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentĪpašums strādā kopā ar display: flex, ko mēs varam izmantot, lai centrētu attēlu horizontāli.

Visbeidzot, attēla platumam jābūt mazākam par konteinera platumu, pretējā gadījumā tas aizņem 100% vietas, un tad mēs to nevaram centrēt.

Svarīgi:display: flex īpašums netiek atbalstīta vecākās versijās pārlūkprogrammu. Sīkāku informāciju skatiet šeit.

Attēla centrēšana vertikāli

Displejs: Flex

Vertikālai izlīdzināšanai display: flexatkal ir ļoti noderīga lietošana.

Apsveriet gadījumu, kad mūsu konteinera augstums ir 800 pikseļi, bet attēla augstums ir tikai 500 pikseļi:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Šajā gadījumā konteineram pievienojot vienu koda rindiņu align-items: center, tiek veikts triks:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

Par align-itemsnekustamo īpašumu var novietot elementi vertikāli, ja tiek lietots kopā ar display: flex.

Pozīcija: Absolūtās un pārveidotās īpašības

Vēl viena metode vertikālā stāvokļa ir, izmantojot positionun transformīpašības kopā. Šis ir nedaudz sarežģīts, tāpēc darīsim to soli pa solim.

1. solis: definējiet absolūto pozīciju

Pirmkārt, mēs mainām attēla pozicionēšanas uzvedību no staticuz absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Turklāt tam vajadzētu būt samērā novietotā konteinerā, tāpēc mēs tam pievienojam position: relativekonteineru div.

2. darbība: definējiet augšējās un kreisās īpašības

Otrkārt, mēs definējam attēla augšējo un kreiso īpašību un iestatām tos uz 50%. Attēla sākuma punkts (augšējā kreisajā stūrī) tiks pārvietots uz konteinera centru:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

3. darbība: definējiet pārveidošanas īpašību

Bet otrais solis ir daļēji pārvietojis attēlu ārpus tā konteinera. Tāpēc mums tas jāatgriež iekšā.

transformĪpašuma definēšana un tā X un Y ass pievienošana -50%:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Ir arī citi veidi, kā centrēt lietas horizontāli un vertikāli, taču es esmu izskaidrojis visbiežāk sastopamos. Es ceru, ka šī ziņa jums palīdzēja saprast, kā izlīdzināt attēlus lapas centrā.

Ja vēlaties uzzināt vairāk par tīmekļa izstrādi, apmeklējiet manu Youtube kanālu, lai uzzinātu vairāk.

Paldies par lasīšanu!