Kā centrēt attēlu HTML

Autors: Mark Sanchez
Radīšanas Datums: 6 Janvārī 2021
Atjaunināšanas Datums: 1 Jūlijs 2024
Anonim
How to Center an Image Horizontally (CSS & HTML Tutorial)
Video: How to Center an Image Horizontally (CSS & HTML Tutorial)

Saturs

Atribūts izlīdzināt tagu html> ir novecojusi kopš HTML5. Lai gan šis atribūts joprojām darbojas lielākajā daļā tīmekļa pārlūkprogrammu, ieteicams attēlus līdzināt, izmantojot kaskādes stila lapas (CSS). Šajā rakstā mēs jums parādīsim, kā centrēt attēlus, izmantojot CSS un novecojušo tagu. izlīdzināt.

Soļi

1. metode no 2: CSS (ieteicams)

  1. 1 Pievienojiet attēlam HTML kodu. Lai izlīdzinātu attēlu, jūs izmantosit kaskādes stila lapas (CSS), bet jums tas jāievieto lapā, izmantojot HTML. Tālāk ir sniegts taga izmantošanas piemērs img> lai kodā ievietotu attēlu:

    img src = "suns.webp" alt = "tas ir suņa attēls">

    • Tā vietā suns.webp aizstājiet attēla faila nosaukumu un pēc "alt" ievadiet attēla aprakstu. Nozīme centrā "klasei" nemainās, jo jūs izveidosit CSS klasi ar šādu nosaukumu.
  2. 2 Atrodiet CSS kodu. Ja jūsu vietnei ir atsevišķs CSS fails, atveriet to. Ja nē, CSS, visticamāk, atrodas HTML faila augšdaļā, tagu iekšpusē galva>... Ritiniet līdz faila augšai, lai atrastu tagus stils> / stils>.
    • Ja tagi stils> / stils> nē, pievienojiet tos. Lai iegūtu vairāk informācijas, izlasiet šo rakstu.
  3. 3 Pievienojiet CSS, lai izlīdzinātu attēlu. "50%" vietā varat ievadīt citu vērtību, lai attēls tiktu parādīts lapā. Jūs nevarēsit centrēt attēlu ar vērtību "100%", tāpēc šim skaitlim jābūt atšķirīgam.

    .center {displejs: bloks; margin-left: auto; mala pa labi: auto; platums: 50%; }

  4. 4 Saglabājiet izmaiņas. Saglabājiet HTML failu un CSS failu (ja tāds ir). Tas centrēs attēlu.
    • Arī tagu iekšpusē img> var pievienot lai centrētu citus attēlus.

2. metode no 2: atribūts "align" HTML

  1. 1 Izveidojiet jaunu rindkopu. Lai gan šī attēlu centrēšanas metode ir novecojusi, tā joprojām darbojas daudzās pārlūkprogrammās. Tomēr mēs iesakām izmantot CSS, lai saglabātu vietnes funkcionalitāti, kad pārlūkprogrammas pārstāj atbalstīt norādīto atribūtu. Atcerieties, ka atribūts izlīdzināt centrēs attēlu tikai tā elementa iekšpusē, kas to ieskauj (piemēram, tagu iekšpusē) p> / p> vai div> / div>). Piemēram, HTML failā mēs izveidosim jaunu rindkopu, pievienojot p> atsevišķā rindā.
  2. 2 Pievienojiet attēlam HTML kodu. Pēc atzīmes ievadiet šādu kodu p>... Izmantojiet šo piemēru kā ceļvedi:

    p> img src = "suns.webp" alt = "attēls" align = "vidū">

    • Tā vietā suns.webp aizstājiet attēla faila nosaukumu un pēc "alt" ievadiet attēla aprakstu.
    • Vidējais atribūts liek pārlūkam parādīt attēlu lapas centrā.
  3. 3 Aizveriet rindkopas tagu. Lai to izdarītu, pievienojiet / p> aiz attēla birkas. Gatavam kodam vajadzētu izskatīties apmēram šādi:

    p> img src = "suns.webp" alt = "attēls" align = "vidū"> / p>

  4. 4 Saglabājiet izmaiņas. Tas centrēs attēlu.