gtemata.com

Cum se aliniază elementele în HTML

Codarea și alinierea corectă a elementelor în HTML necesită utilizarea CSS, dar nu toate site-urile web vă permit să personalizați foile de stil pentru a alinia corect secțiunile paginii dvs. Web. Aflați cum să aliniați un element în HTML astfel încât acesta să apară așa cum doriți, chiar dacă nu puteți adăuga o foaie nouă de stil pe site. Această tehnică este numită "inline" CSS.

paşi

Metoda 1

Aliniați textul cu HTML
1
Adăugați eticheta "div" la fiecare secțiune la care doriți să modificați alinierea. Aceasta înseamnă că va trebui să adăugați eticheta "div" în interiorul simbolurilor "mai mare" și "inferior" (<>) în fața primei etichete HTML și adăugați "/ div" în aceleași simboluri (<>) în fața ultimei etichete HTML a secțiunii la care doriți să modificați alinierea.
  • 2
    Găsiți ce proprietate să utilizați în etichetă "div" pentru a modifica alinierea textului.
  • 3
    Dacă doriți să aliniați textul din stânga, editați eticheta "div" inserând următorul text în interiorul simbolurilor "<>": div style = `text-align: left`.
  • Dacă doriți să aliniați textul din dreapta, editați eticheta "div" inserând următorul text în interiorul simbolurilor "<>": div stil = `text-aliniere: dreapta`.
  • Dacă doriți să aliniați textul în mijloc, editați eticheta "div" inserând următorul text în interiorul simbolurilor "<>": div stil = `text-aliniere: centru`.
  • Dacă doriți să justificați textul, editați eticheta "div" inserând următorul text în interiorul simbolurilor "<>": div style = `text-align: justify`.
  • 4
    Salvați modificările.
  • 5
    Verificați aspectul conținutului dvs. pentru a vă asigura că au fost aplicate modificările.
  • Dacă nu au fost aplicate, înseamnă că site-ul adoptă un cod specific care anulează etichetele "div" în foaia de stil. Împingeți foaia de stil adăugând versiunea corespunzătoare "style = `text-align: right`" în interiorul etichetei de deschidere a fiecărui element pentru a modifica alinierea sa. De exemplu, o etichetă "p" ar fi modificat cu "p stil = `text-aliniere: dreapta`" în interiorul simbolurilor "<>".
  • 6


    Verificați dacă textul a fost aliniat după cum doriți.

    • Metoda 2

    Aliniați imaginile cu HTML
    1
    Găsiți codul HTML al imaginii pe care doriți să o aliniați.
  • 2
    Editați eticheta "img" adăugând proprietatea "plutitor".
  • Dacă doriți ca imaginea să fie aliniată spre stânga, adăugați în interiorul simbolurilor "<>" de etichetă: style = `float: left`, ca în "img style = `float: right`".
  • Dacă doriți ca imaginea să fie aliniată spre dreapta, adăugați în interiorul simbolurilor "<>" de etichetă: style = `float: right`, ca în "img style = `float: right`".
  • Dacă doriți să aliniați imaginea în mijloc, codul devine un pic mai complicat. Nu există nici o proprietate "float: centru", va trebui să adăugați, întotdeauna în interiorul simbolurilor "<>": style = `align: center-text-align: center`, ca și în "img style = `Aliniere: center-text-align: center`".
  • 3
    Salvați codul.
  • 4
    Verificați dacă imaginile sunt bine aliniate.

    • Sfaturi

    • Poate că ați observat folosirea proprietății "p align = `centru`" (în interiorul simbolurilor "<>") pentru a modifica alinierea textului. Încercați să o evitați, deoarece aceasta este acum depășită și este doar o chestiune de timp înainte ca browserele principale să suspende utilizarea.
    • Instrucțiunile privind modul de aliniere a imaginilor cu HTML vă permit, de asemenea, să aliniați secțiunile cu HTML. Adăugați eticheta "div" la începutul și la sfârșitul secțiunilor, așa cum sa explicat în etapele anterioare. Puteți adăuga proprietatea "plutitor" în etichetă "div", la fel ca tag-urile "img" pentru alinierea imaginilor.
    • În cazul în care codul nu este afișat corect, este probabil ca site-ul să adopte un filtru pentru a invalida etichete similare în codul HTML. Cu toate acestea, este posibil, de asemenea, să existe elemente care lipsesc, cum ar fi un punct și virgulă, o paranteză sau ghilimele în cadrul codului, împiedicând astfel funcționarea corectă a codului. Verificați dacă aceste elemente sunt incluse, mai ales dacă părțile din cod par să funcționeze și altele nu.
    Afișează mai mult ... (2)
    Distribuiți pe rețelele sociale:

    înrudit