Paano isentro ang isang imahe sa HTML

May -Akda: Mark Sanchez
Petsa Ng Paglikha: 6 Enero 2021
I -Update Ang Petsa: 1 Hulyo 2024
Anonim
My Full Battle Of Titans Thumbnail Process | Affinity Photo iPad
Video.: My Full Battle Of Titans Thumbnail Process | Affinity Photo iPad

Nilalaman

Katangian ihanay tag html> ay hindi na ginagamit mula noong HTML5. Habang gumagana pa rin ang katangiang ito sa karamihan sa mga web browser, inirerekumenda na ihanay mo ang mga imahe gamit ang Cascading Style Sheets (CSS). Sa artikulong ito, ipapakita namin sa iyo kung paano isentro ang mga imahe gamit ang CSS at ang hindi na ginagamit na tag. ihanay.

Mga hakbang

Paraan 1 ng 2: CSS (Inirerekumenda)

  1. 1 Magdagdag ng HTML code para sa imahe. Gagamitin mo ang mga sheet ng style na cascading (CSS) upang ihanay ang imahe, ngunit kakailanganin mong ilagay ito sa pahina gamit ang HTML. Ang sumusunod ay isang halimbawa ng paggamit ng tag img> upang magsingit ng isang imahe sa iyong code:

    img src = "dog.webp" alt = "ito ay larawan ng isang aso">

    • Sa halip na aso.webp kapalit ang pangalan ng file ng imahe, at pagkatapos ng "alt" ipasok ang paglalarawan ng imahe. Kahulugan gitna para sa "klase" ay hindi nagbabago, dahil lilikha ka ng isang klase ng CSS na may pangalang iyon.
  2. 2 Hanapin ang CSS code. Kung ang iyong site ay may hiwalay na CSS file, buksan ito. Kung hindi, ang CSS ay malamang na nasa tuktok ng HTML file, sa loob ng mga tag ulo>... Mag-scroll sa tuktok ng file upang makahanap ng mga tag style> / style>.
    • Kung tag style> / style> hindi, idagdag ang mga ito. Basahin ang artikulong ito para sa karagdagang impormasyon.
  3. 3 Magdagdag ng CSS upang ihanay ang imahe. Sa halip na "50%", maaari kang maglagay ng ibang halaga upang maipakita ang imahe sa pahina. Hindi mo mapapagitna ang imahe sa halagang "100%", kaya dapat na magkakaiba ang bilang na ito.

    .center {display: block; margin-left: auto; margin-kanan: auto; lapad: 50%; }

  4. 4 I-save ang iyong mga pagbabago. I-save ang HTML file at CSS file (kung mayroon man). Ito ay isentro ang imahe.
    • Sa loob din ng mga tag img> maaaring idagdag upang isentro ang iba pang mga imahe.

Paraan 2 ng 2: Ang katangiang "ihanay" sa HTML

  1. 1 Lumikha ng isang bagong talata. Bagaman hindi na ginagamit ang pamamaraang ito ng pag-sentro ng mga imahe, gumagana pa rin ito sa maraming mga browser. Gayunpaman, inirerekumenda namin ang paggamit ng CSS upang mapanatili ang pag-andar ng site kapag tumigil ang mga browser sa pagsuporta sa tinukoy na katangian. Tandaan na ang katangian ihanay isentro lamang ang larawan sa loob ng elemento na pumapaligid dito (halimbawa, sa loob ng mga tag p> / p> o div> / div>). Bilang isang halimbawa, sa HTML file, lilikha kami ng isang bagong talata sa pamamagitan ng pagdaragdag p> sa isang hiwalay na linya.
  2. 2 Magdagdag ng HTML code para sa imahe. Ipasok ang sumusunod na code pagkatapos ng tag p>... Gamitin ang halimbawang ito bilang isang gabay:

    p> img src = "dog.webp" alt = "larawan" align = "gitna">

    • Sa halip na aso.webp kapalit ang pangalan ng file ng imahe, at pagkatapos ng "alt" ipasok ang paglalarawan ng imahe.
    • Sinasabi ng gitnang katangian ang browser na ipakita ang larawan sa gitna ng pahina.
  3. 3 Isara ang tag ng talata. Upang magawa ito, idagdag / p> pagkatapos ng tag ng larawan. Ang natapos na code ay dapat magmukhang ganito:

    p> img src = "dog.webp" alt = "larawan" align = "gitna"> / p>

  4. 4 I-save ang iyong mga pagbabago. Ito ay isentro ang imahe.