Как да центрирате изображението в HTML (с илюстрации)

Атрибут В съответствие Tag считат за остарели с появата на HTML5. Въпреки че този атрибут все още работи в повечето уеб браузъри, се препоръчва да се подравнят изображенията, използващи каскадни таблици за стил (CSS). В тази статия ще ви кажем как да центрирате изображения с CSS и остарял маркер В съответствие.

Стъпка

Метод 1 от 2:

CSS (препоръчително)

един. Добавете HTML код за изображение. За да подравните снимката, ще използвате каскадни стилни листове (CSS), но ще трябва да го поставите на страницата с помощта на HTML. Следното е пример за използване на маркера За да вмъкнете изображението в кода:

  Src ="Кучета.JPG" Alt ="Това е снимка на куче" Клас ="Център". T

Вместо Кучета.JPG Подгответе името на файла с изображения и след "alt" въведете описанието на изображението. Значение Център За "клас" не се променя, защото ще създадете CSS клас с това име.

2. Намерете CSS код. Ако на сайта има отделен CSS файл, отворете. Ако не, CSS кодът най-вероятно е разположен в горната част на HTML файла в таговете . Превъртете до върха на файла, за да намерите маркери .

Ако Тагов Не, добавете ги. Прочети тази статия, Да получите повече информация.

3. Добавяне към CSS код за подравняване на картината. Вместо "50%", можете да въведете друга стойност, така че изображението да се появи на страницата. Изтегляне на изображението със стойността "100%" няма да работи, така че този номер трябва да бъде различен.

.Център {Дисплей: блок-марж-ляв: Автоматичен марж-дясно: автоматична ширина: 50% -}

4. Запазете направените промени. Запазете HTML файла и CSS файла (ако е така). Така че центрирате изображението.

Също в Тагов може да добави Клас ="Център", За да изтриете други изображения.

Метод 2 от 2:

Атрибут "Подравняване" в HTML

един. Създайте нов параграф. Въпреки че този метод на центриращите изображения се счита за остарели, той все още работи в много браузъри. Въпреки това, препоръчваме да използвате CSS да функционира, когато браузърите да спрат да поддържат посочения атрибут. Не забравяйте, че атрибутът В съответствие центрираната картина само вътре в елемента, който я заобикаля (например вътре в етикетите или Чест. Като пример в HTML файл, ние ще създадем нов параграф, като добавим На отделен ред.

2. Добавете HTML код за изображение. Въведете следния код след етикета . Използвайте този пример като ръководство:


 Src ="Кучета.JPG" Alt ="снимка" подравняване ="В средата". T

Вместо Кучета.JPG Подгответе името на файла с изображения и след "alt" въведете описанието на изображението.

Атрибутът "средна" информира браузъра, който картината трябва да се покаже в центъра на страницата.

3. Затворете етикета. За да направите това Добавяне След клипката за етикети Чл. Готовият код трябва да изглежда така:


 Src ="Кучета.JPG" Alt ="снимка" подравняване ="В средата". T

4. Запазете направените промени. Така че центрирате изображението.