Center ng teksto sa HTML

May -Akda: Tamara Smith
Petsa Ng Paglikha: 28 Enero 2021
I -Update Ang Petsa: 1 Hulyo 2024
Anonim
Lesson 3 (Formatting text (part 1). Fonts. Lists)
Video.: Lesson 3 (Formatting text (part 1). Fonts. Lists)

Nilalaman

Itinuturo sa iyo ng wikiHow na ito kung paano isentro ang teksto sa isang website ng HTML. Gumagamit kami ng CSS (Mga Cascading Style Sheet o style sheet) para dito. Dati nakasentro kami sa HTML gamit ang gitna>tag, ngunit hindi na ito gumagana sa karamihan ng mga browser.

Upang humakbang

Paraan 1 ng 2: Paggamit ng CSS

  1. Buksan ang file ng teksto kung saan inilalarawan mo ang iyong mga estilo. Ngayon ang gitna>Hindi na ginagamit ang tag, lumikha ng isang bagong elemento sa file na ito na isasentro ang teksto sa ilang mga lugar ng iyong HTML na dokumento. Kung wala kang isang hiwalay na CSS file, ang mga code ay nasa tuktok ng dokumento ng HTML sa pagitan ng mga "style>" at "/ style>" na mga tag.
    • Tulad ng style>- at / style>ang mga tag ay wala pa, maaari mong ilagay ang mga ito nang direkta sa ilalim ng katawan>i-tag sa sumusunod na paraan:
    • ! DOCTYPE html> html> body> style> / style>

  2. Lumikha ng isang klase na nakasentro sa teksto. Ang div>Sinasabi ng tag ang iyong dokumento sa HTML aling tukoy na seksyon na nauugnay sa klase na ito. I-type ang sumusunod sa pagitan ng mga "style" na tag, siguraduhing mag-click nang dalawang beses ↵ Ipasok pagkatapos ng unang linya:

      div.a {}

  3. Idagdag ang text-alignpag-aari Uri text-align: gitna; sa pagitan ng mga brace sa div.a-seksyon Ang "header" ngayon ay ganito ang hitsura:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style>

  4. Idagdag ang tama divi-tag ang teksto na nais mong isentro. Ginagawa mo ito sa pamamagitan ng div>tag sa itaas ng teksto na ito at isinasara ito ng a / div>tag sa ibaba ng text na ito. Halimbawa, kung nais mong isentro ang isang pamagat at ang talata sa ibaba nito, ganito ang hitsura:

      div> h1> Maligayang pagdating sa aking website / h1> p> Ang website na ito ay pangunahin upang magbigay ng impormasyon tungkol sa mga bagay./p> / div>

  5. Gamitin ang div.ai-tag sa gitna ng iba pang mga elemento. Kapag nais mong sentro ng isa pang elemento, tulad ng nilalaman sa pagitan ng mga tag p> / p> at h2> / h2>), nagta-type ka div> para sa elementong ito at / div> pagkatapos Dahil natukoy mo na ang "div.a" bilang nakasentro sa CSS code, ang mga elementong ito ay nakasentro rin ngayon.

      style> div.a {text-align: center; } / style> div> h2> Malugod ang mga donasyon / h2> p> mangyaring / p> / div>

  6. Suriin ang iyong dokumento. Bagaman ang teksto sa iyong webpage ay siyempre magkakaiba, dapat itong magmukhang ganito:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Maligayang pagdating sa aking website / h1> p> Ang website na ito ay pangunahin para sa pagbibigay ng impormasyon tungkol sa mga bagay. / p> / div> div> h2> Ang mga donasyon ay maligayang pagdating / h2> p> mangyaring / p> / div> / body> / html>

Paraan 2 ng 2: Paggamit ng tag na "center" sa HTML

  1. Buksan ang iyong dokumento sa HTML. Inilalarawan ng pamamaraang ito kung paano makuha ang lipas na gitna>tag Ang pamamaraang ito ay maaari pa ring gumana sa isang bilang ng mga browser, ngunit pinakamahusay na huwag masyadong umasa dito.
  2. Hanapin ang teksto na nais mong isentro. Mag-scroll pababa sa iyong dokumento hanggang sa makita mo ang pamagat, talata, o iba pang teksto na nais mong isentro.
  3. Ilagay ang tag na "gitna" sa magkabilang panig ng teksto. Ganito ang code gitna> teksto / gitna>. Dito, "text" ang teksto na isentro. Kung may iba pang mga tag sa tekstong ito, tulad ng "p> / p>" bago ang isang talata, ilagay ang mga "center" na tag sa labas ng mga mayroon nang mga tag.

      center> h1> Maligayang pagdating sa aking website / h1> / center> center> Gawing komportable ang iyong sarili! / center>

  4. Suriin ang iyong dokumento sa HTML. Dapat itong magmukhang ganito:

      ! DOCTYPE html> html> body> h1> center> Maligayang pagdating sa aking website / center> / h1> center> Gawing madali para sa iyong sarili! / Center> p1> Pangunahin ang website na ito upang magbigay ng impormasyon tungkol sa mga bagay./p1> / body > / html>