Съдържание

• Стъпки
• Метод 1 от 2: CSS (препоръчително)
• Метод 2 от 2: Атрибутът „align“ в HTML

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

Стъпки

Метод 1 от 2: CSS (препоръчително)

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

   img src = "dog.webp" alt = "това е снимка на куче">

   • Вместо dog.webp заменете името на файла с изображение и след "alt" въведете описанието на изображението. Смисъл център за "class" не се променят, защото ще създадете CSS клас с това име.
2. 2 Намерете CSS кода. Ако вашият сайт има отделен CSS файл, отворете го. Ако не, CSS най -вероятно е в горната част на HTML файла, вътре в маркерите глава>... Превъртете до горната част на файла, за да намерите маркери стил> / стил>.
   • Ако тагове стил> / стил> не, добавете ги. Прочетете тази статия за повече информация.
3. 3 Добавете CSS, за да подравните изображението. Вместо „50%“, можете да въведете различна стойност, за да накарате изображението да се появи на страницата. Няма да можете да центрирате изображението със стойност "100%", така че този номер трябва да е различен.

   .center {дисплей: блок; margin-left: auto; margin-right: auto; ширина: 50%; }

4. 4 Запазете промените си. Запазете HTML файла и CSS файла (ако има такъв). Това ще центрира изображението.
   • Също и вътре в таговете img> може да добави за центриране на други изображения.

Метод 2 от 2: Атрибутът „align“ в HTML

1. 1 Създайте нов параграф. Въпреки че този метод за центриране на изображения е отхвърлен, той все още работи в много браузъри. Препоръчваме обаче да използвате CSS, за да поддържате сайта функционален, когато браузърите престанат да поддържат посочения атрибут. Не забравяйте, че атрибутът подравнете ще центрира картината само вътре в елемента, който я заобикаля (например вътре в таговете p> / p> или div> / div>). Като пример в HTML файла ще създадем нов абзац чрез добавяне p> на отделен ред.
2. 2 Добавете HTML код за изображението. Въведете следния код след маркера p>... Използвайте този пример като ръководство:

   p> img src = "dog.webp" alt = "picture" align = "middle">

   • Вместо dog.webp заменете името на файла с изображение и след "alt" въведете описанието на изображението.
   • Средният атрибут казва на браузъра да покаже картината в центъра на страницата.
3. 3 Затворете маркера на абзаца. За да направите това, добавете / p> след етикета на снимката. Готовият код трябва да изглежда така:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

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