Како да ја центрирате сликата во HTML (со илустрации)

Атрибут Порамни Таг смета застарена со доаѓањето на HTML5. Иако овој атрибут сè уште работи во повеќето веб прелистувачи, се препорачува да ги усогласат сликите користејќи табели за каскадни стил (CSS). Во оваа статија ќе ви кажеме како да ги центрирате сликите со CSS и застарена ознака Порамни.

Чекори

Метод 1 од 2:

CSS (препорачано)

Еден. Додај HTML код за слика. За да ја усогласите сликата, ќе користите каскадни стилски листови (CSS), но тоа ќе мора да го поставите на страницата користејќи HTML. Следното е пример за користење на ознаката За да ја вметнете сликата во кодот:

  Src = "куче.jpg "alt =" е слика на куче "класа =" центар ">

Наместо тоа Куче.JPG Подложете го името на датотеката со слики, а по "alt" внесете го описот на сликата. Вредност Центар За "класа" не се менува, бидејќи ќе креирате CSS класа со ова име.

2. Најдете CSS код. Ако има посебна CSS датотека на сајтот, отворете го. Ако не, CSS кодот најверојатно се наоѓа на врвот на HTML-датотеката во таговите . Скролувајте до врвот на датотеката за да најдете ознаки .

Ако wagev Не, додадете ги. Прочитајте Оваа статија, За да добиете повеќе информации.

3. Додај во CSS код за усогласување на сликата. Наместо "50%", можете да внесете друга вредност, така што сликата се појавува на страната. Certor Сликата со вредноста "100%" нема да работи, така што овој број треба да биде различен.

.Центар {Екран: Блок-маргина-лево: Автоматско-маргина: Авто-ширина: 50% -}

Четири. Зачувајте ги направените промени. Зачувајте ја датотеката HTML и CSS датотеката (ако е). Значи, ја центрирате сликата.

Исто така во Тагови може да додаде Класа = "Центар", За да избришете други слики.

Метод 2 од 2:

Атрибут "Порамни" во HTML

Еден. Креирај нов став. Иако овој метод на центрирање на слики се смета за застарен, сепак работи во многу прелистувачи. Сепак, препорачуваме користење на CSS да функционира кога прелистувачите престанат да го одржуваат наведениот атрибут. Запомнете дека атрибутот Порамни центрирана слика само во внатрешноста на елементот што го опкружува (на пример, внатре во ознаките или ). Како пример во HTML-датотека, ние ќе создадеме нов став со додавање На посебна линија.

2. Додај HTML код за слика. Внесете го следниов код по ознаката . Користете го овој пример како водич:


 Src = "куче.Jpg "alt =" слика "align =" средината ">

Наместо тоа Куче.JPG Подложете го името на датотеката со слики, а по "alt" внесете го описот на сликата.

"Средниот" атрибут го известува прелистувачот дека сликата треба да биде прикажана во центарот на страницата.

3. Затворете го ознаката за став. За да го направите ова По тагот клип уметност. Готовиот код треба да изгледа вака:


 Src = "куче.Jpg "alt =" слика "align =" средината ">

Четири. Зачувајте ги направените промени. Значи, ја центрирате сликата.