Kaip centruoti vaizdą HTML

Autorius: Mark Sanchez
Kūrybos Data: 6 Sausio Mėn 2021
Atnaujinimo Data: 1 Liepos Mėn 2024
Anonim
How to Center an Image Horizontally (CSS & HTML Tutorial)
Video.: How to Center an Image Horizontally (CSS & HTML Tutorial)

Turinys

Atributas sulygiuoti žyma html> buvo nebenaudojamas nuo HTML5. Nors šis atributas vis dar veikia daugelyje žiniatinklio naršyklių, rekomenduojama lygiuoti vaizdus naudojant kaskadinio stiliaus lapus (CSS). Šiame straipsnyje mes parodysime, kaip centruoti vaizdus naudojant CSS ir nebenaudojamą žymą. sulygiuoti.

Žingsniai

1 metodas iš 2: CSS (rekomenduojama)

  1. 1 Pridėkite vaizdo HTML kodą. Norėdami sulyginti vaizdą, naudosite kaskadinius stiliaus lapus (CSS), tačiau turėsite įdėti jį į puslapį naudodami HTML. Toliau pateikiamas žymos naudojimo pavyzdys img> Norėdami įterpti paveikslėlį į savo kodą:

    img src = "šuo.webp" alt = "tai šuns paveikslėlis">

    • Vietoj šuo.webp pakeiskite vaizdo failo pavadinimą ir po „alt“ įveskite vaizdo aprašymą. Reikšmė centre „klasė“ nesikeičia, nes sukursite CSS klasę tokiu pavadinimu.
  2. 2 Raskite CSS kodą. Jei jūsų svetainėje yra atskiras CSS failas, atidarykite jį. Jei ne, CSS greičiausiai yra HTML failo viršuje, žymų viduje galva>... Slinkite iki failo viršaus, kad surastumėte žymas stilius> / stilius>.
    • Jei žymės stilius> / stilius> ne, pridėkite juos. Norėdami gauti daugiau informacijos, perskaitykite šį straipsnį.
  3. 3 Norėdami sulyginti vaizdą, pridėkite CSS. Vietoj „50%“ galite įvesti kitą vertę, kad vaizdas būtų rodomas puslapyje. Negalėsite sucentruoti vaizdo, kurio vertė yra „100%“, todėl šis skaičius turėtų būti kitoks.

    .center {ekranas: blokas; paraštė kairėn: automatinė; paraštė-dešinė: auto; plotis: 50%; }

  4. 4 Išsaugokite pakeitimus. Išsaugokite HTML failą ir CSS failą (jei yra). Tai sutelks vaizdą į centrą.
    • Taip pat etikečių viduje img> gali pridėti centruoti kitus vaizdus.

2 metodas iš 2: atributas „align“ HTML

  1. 1 Sukurkite naują pastraipą. Nors šis vaizdų centravimo metodas buvo nebenaudojamas, jis vis dar veikia daugelyje naršyklių. Tačiau rekomenduojame naudoti CSS, kad svetainė veiktų, kai naršyklės nustoja palaikyti nurodytą atributą. Atminkite, kad atributas sulygiuoti centruos paveikslėlį tik jį supančio elemento viduje (pavyzdžiui, etikečių viduje) p> / p> arba div> / div>). Pavyzdžiui, HTML faile sukursime naują pastraipą pridėdami p> atskiroje eilutėje.
  2. 2 Pridėkite vaizdo HTML kodą. Po žymės įveskite šį kodą p>... Naudokite šį pavyzdį kaip vadovą:

    p> img src = "šuo.webp" alt = "picture" align = "middle">

    • Vietoj šuo.webp pakeiskite vaizdo failo pavadinimą ir po „alt“ įveskite vaizdo aprašymą.
    • Vidurinis atributas nurodo naršyklei rodyti paveikslėlį puslapio centre.
  3. 3 Uždarykite pastraipos žymą. Norėdami tai padaryti, pridėkite / p> po paveikslėlio etikete. Užbaigtas kodas turėtų atrodyti maždaug taip:

    p> img src = "šuo.webp" alt = "picture" align = "middle"> / p>

  4. 4 Išsaugokite pakeitimus. Tai sutelks vaizdą į centrą.