Kā centrēt attēlu, izmantojot HTML un CSS

Šajā apmācībā mēs redzēsim, kā centrēt attēlus, izmantojot HTML un CSS. Tas nav nekas sarežģīts, un mums tas bieži būs vajadzīgs mūsu tīmekļa lapām. Mēs redzēsim dažas iespējas, no kurām viena tiek izmantota tikai HTML, otra, izmantojot CSS un visbeidzot, izmantojot Bootstrap.

HTML un CSS ir divas vadošās tīmekļa skriptu valodas tīmekļa lapu un lietojumprogrammu veidošanas pasaulē. Abas valodas strādā kopā ar šo uzdevumu. Kamēr HTML piešķir tīmekļa lapām struktūru, CSS rūpējas par stilu un vizuālo vai dzirdamo daļu. HTML nodrošina tagus, kas aptver dažādus lapas elementus, un tādā veidā kopā ar atribūtiem mēs izveidosim savas vietnes skeletu.

Atšķirības starp HTML un CSSApkopojot, mēs varam redzēt atšķirības starp HTML un CSS šādi:

• HTML ir vieglāk iemācīties un ieviest

• HTML ir pieejams vairākās valodās

• HTML ir viegls un efektīvs

• HTML drošība ir ierobežota

• HTML ir nedaudz lēns.

• CSS ir lielāka atribūtu un stilu bibliotēka nekā CSS

• CSS uzlabo lapas ielādes laiku.

• CSS ir lieliska saderība un ērta apkope.

• CSS rada dažas darbības problēmas

• CSS nav iebūvēta drošība

Šodien ieteicams veikt darbības tieši ar CSS, bet, ja jums ir vairāk HTML, jums var būt arī šādas iespējas.

1. Kā centrēt attēlu tīmekļa lapā, izmantojot tikai HTML

Lai gan, veicot šīs opcijas, lai centrētu attēlu, izmantojot HTML, mēs redzēsim divus veidus, kā to viegli izdarīt.

Centrālais attēls ar HTML un centra taguŠajā vienkāršajā variantā pietiek ar attēla iesaiņošanu ar centrālajām etiķetēm

• Daļa “src” tiek izmantota, lai norādītu attēla ceļa adresi.

• Alt daļa sniedz informāciju tīmekļa lapai par attēla nosaukumu.

Turklāt mums ir jāpiešķir attēla augstums un platums šādi:

  augstums = "250" 

Centrēts attēls ar HTML un vidūBet attiecībā uz attēliem šis redzētais centra jēdziens atšķiras, un labāk ir izmantot vidējo līdzinājumu, tāpēc kods paliek šāds:

  saskaņot = ”vidū”> 

Ja pievienosim arī tekstu, mums būs šāds kods:

Šis piemērs būs attēla centrēšana ar tekstu HTML.  align = ”middle”> Tagad mēs pabeidzam teksta paraugu.

Izlīdziniet attēlu ar HTML, izmantojot izlīdzināšanas atribūtuJa mēs vēlamies izlīdzināt attēlu horizontāli, mēs varam to darīt līdzīgi tam, ko mēs darām ar tekstu, tas ir, izmantot etiķešu līdzināšanas atribūtu

vai. Mēs izveidosim kodu, kur atribūts parādās kopā ar attēla tagu. Etiķete ir viena no tām, kas pieņem līdzināšanas atribūtu, bet lietojums ir atšķirīgs.

Bet, kā mēs sakām, etiķete Šeit mēs ievietosim tekstu, kas aizpildītu visu labo daļu un ietītu mūsu ievietoto attēlu. Mēs turpinām aizpildīt tekstu solvetic solvetic solvetic

Mēs darīsim to pašu, lai izlīdzinātu tekstu un attēlu pa labi kreisajā pusē, bet aizstājot “kreiso” ar “labo”.

Šeit mēs ievietosim tekstu, kas aizpildītu visu labo daļu un ietītu mūsu ievietoto attēlu. Mēs turpinām aizpildīt tekstu solvetic solvetic solvetic

Tas nav ieteicams, jo izvietojuma un stila aspekti jāatstāj CSS ziņā, nevis jāizmanto tieši HTML. Tādā veidā mums būs kods, kuru ir vieglāk uzturēt un mainīt, bet, ja kādā brīdī tas ir vajadzīgs nelielam un ātram testam, tas ir jāzina.

2. Kā centrēt attēlu tīmekļa lapā, izmantojot CSS

Šeit mums būs HTML kods un CSS kods. Mēs sākam, apskatot HTML.

Mēs attēlam esam piešķīruši klasi, ko sauc par centru, un tas mums palīdzēs vēlāk to noformēt CSS. Zemāk ir kods attēla centrēšanai.

 .center {margin: 10px auto; displejs: bloks; } 

Mēs varam arī izmantot šo kodu, lai izlīdzinātu attēlu, izmantojot mūsu tīmekļa lapas CSS:

 .center {margin-left: auto; mala pa labi: auto; }

Ja pārlūkprogrammā tas nedarbojas, jo tiek izmantota teksta centrēšanas metode, mums ir jānorāda pārlūkam, ka attēls ir bloka līmeņa elements. Tādā veidā mēs varam to centrēt tā, it kā tas būtu cits bloks. Mēs izmantosim šo kodu:

Mēs liekam elementam parādīties kā blokam, un mēs tam piešķiram automātisku piemali (pietiek ar to, ka mala ir automātiska sānos, augšpusē un apakšā, jūs varat ievietot visu, ko vēlaties). Paturiet prātā, ka, ja attēls aizņem visu platumu, tas netiks centrēts.

 img.center {displejs: bloks; margin-left: auto; mala pa labi: auto; }

3. Kā centrēt attēlu tīmekļa lapā, izmantojot Bootstrap

Ar šo populāro ietvaru viss ir vienkāršāk, mums vienkārši jāiekļauj centrālo bloku klase.

Jums būs jālejupielādē Bootstrap un jāsaista tā vai jāievieto CDN mūsu HTML kodā, tāpēc es atstāju jūsu saiti zemāk:

Šo kodu piemērošanas rezultātu var redzēt ar attēlu zemāk:

Tādā veidā mēs varam gan centrēt savus attēlus HTML, gan izmantojot CSS un tādējādi padarīt estētiski veiksmīgākus tīmekļa darbus.