Centrați textul în HTML

Autor: Tamara Smith
Data Creației: 28 Ianuarie 2021
Data Actualizării: 1 Iulie 2024
Anonim
CSS Center text Horizontal and Vertical
Video: CSS Center text Horizontal and Vertical

Conţinut

Acest wikiHow vă învață cum să centrați textul pe un site web HTML. Pentru aceasta folosim CSS (Cascading Style Sheets sau Foi de stil). Obișnuiam să ne centram în HTML folosind centru>etichetă, dar aceasta nu mai funcționează în majoritatea browserelor.

A calca

Metoda 1 din 2: Utilizarea CSS

  1. Deschideți fișierul text în care vă descrieți stilurile. Acum centru>eticheta nu mai este utilizată, creați un element nou în acest fișier care va centra textul în anumite zone ale documentului HTML. Dacă nu aveți un fișier CSS separat, codurile se află în partea de sus a documentului HTML între etichetele „stil>” și ​​„/ stil>„.
    • Dupa cum stil>- și / style>etichetele nu sunt încă disponibile, le puteți pune direct sub corp>etichetați în felul următor:
    • ! DOCTYPE html> html> body> style> / style>

  2. Creați o clasă care centrează textul. div>eticheta indică documentului HTML cărui secțiune specifică îi aparține această clasă. Tastați următoarele dintre etichetele „stil”, asigurându-vă că dați clic de două ori ↵ Intrați după prima linie:

      div.a {}

  3. Adaugă aliniere textproprietate. Tip text-align: centru; între bretele din div.a-secțiune. „Antetul” arată acum astfel:

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

  4. Adăugați cea corectă divetichetați textul pe care doriți să îl centrați. Faceți acest lucru prin intermediul div>etichetați deasupra acestui text și închideți-l cu un / div>eticheta de sub acest text. De exemplu, dacă doriți să centrați un titlu și paragraful de sub acesta, arată astfel:

      div> h1> Bine ați venit pe site-ul meu / h1> p> Acest site web oferă în principal informații despre lucruri. / p> / div>

  5. Folosește div.aetichetați pentru a centra alte elemente. Când doriți să centrați un alt element, cum ar fi conținutul între etichete p> / p> și h2> / h2>), tastați div> pentru acest element și / div> după aceea. Întrucât ați definit deja „div.a” drept cod CSS de centrare, aceste elemente sunt acum și centrate.

      stil> div.a {text-align: center; } / style> div> h2> donațiile sunt binevenite / h2> p> vă rog / p> / div>

  6. Verificați documentul. Deși textul de pe pagina dvs. web este, desigur, diferit, ar trebui să arate cam așa:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Bine ați venit pe site-ul meu / h1> p> Acest site web este în principal pentru furnizarea de informații despre lucruri. / p> / div> div> h2> Donațiile sunt binevenite / h2> p> vă rog / p> / div> / body> / html>

Metoda 2 din 2: Folosirea etichetei „centru” în HTML

  1. Deschideți documentul HTML. Această metodă descrie cum să devii învechit centru>etichetă. Această metodă poate funcționa în continuare în mai multe browsere, dar este mai bine să nu vă bazați prea mult pe ea.
  2. Găsiți textul pe care doriți să îl centrați. Derulați documentul în jos până găsiți titlul, paragraful sau alt text pe care doriți să îl centrați.
  3. Plasați eticheta „centru” pe ambele părți ale textului. Codul arată astfel centru> text / centru>. Aici, „text” este textul care trebuie centrat. Dacă există alte etichete în acest text, cum ar fi „p> / p>” înainte de un paragraf, plasați etichetele „centru” în afara etichetelor existente.

      centru> h1> Bine ați venit pe site-ul meu / h1> / centru> centru> Faceți-vă confortabil! / centru>

  4. Verificați documentul HTML. Ar trebui să arate cam așa:

      ! DOCTYPE html> html> body> h1> center> Bine ați venit pe site-ul meu / centru> / h1> center> Faceți-vă mai ușor pentru dvs.! / Center> p1> Acest site web oferă în principal informații despre lucruri. / P1> / body > / html>