Како центрирати слику на веб страницу користећи ХТМЛ

Иако то није нужно тешко, центрирање слика на ваше веб странице може бити више укључено него што мислите. Главни разлог је тај таг је инлине елемент, тако да се понаша другачије него елементи на нивоу блока. Неки приступи користе ХТМЛ; други користе ЦСС, а неки се сматрају "правилнијим" од других по томе што нису застарели. Да бисте наставили, изаберите методу са листе испод и пратите упутства.

За подршку у ХТМЛ5, требало би да користите атрибут стиле са вредностима тект-алигн: центер унутар елемента на нивоу блока; као што је ознаке.

Пример ХТМЛ кода

Савет: Додавање инлине стила као што је приказано изнад треба да се уради само једном, ако треба да центрирате више слика, требало би да користите доњу сугестију и креирате ЦСС класу како бисте смањили редундантни код и убрзали своју веб страницу.

Пример центра за слике помоћу горњег кода

Претварање у елемент на нивоу блока

Један од начина да правилно поставите слике је да дефинишете елемент као елемент на нивоу блока. Да бисте то урадили, додајте правило у главу ваше странице (приказано у следећем примеру) или повезану спољну ЦСС датотеку.

Пример ХТМЛ кода

 .центерИмаге {тект-алигн: центар; дисплеј блок; } 

Са овим кодом, можете применити цлассИмаге класу на без потребе за гнездом у елементу на нивоу блока. Ова метода ради за више слика.

Пример кода у центру слике

Коришћење ознака

Можете центрирати слику тако што ћете приложити ознака у ознаке. Ова акција центрира, и само то, слику на веб страници. Треба напоменути да је овај метод застарео у ХТМЛ5 и неће увек радити у свим претраживачима који се крећу напред. Ову методу препоручујемо само ако ниједан од горе поменутих предлога не функционише тамо где покушавате да центрирате слику.

Пример ХТМЛ кода