logo

Як вирівняти зображення в Html

Якщо ми хочемо перемістити зображення в різні місця на веб-сторінці за допомогою тегу Html, ми повинні виконати кроки, наведені нижче.

Крок 1: По-перше, ми повинні ввести код Html у будь-якому текстовому редакторі або відкрити існуючий файл Html у текстовому редакторі, у якому ми хочемо вирівняти зображення:

 Align an Image Hello User! This page helps us to understandhow to specify an image at a particular position in a pargraph using the Html tag. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp"> 

крок 2: Тепер помістіть курсор усередину тег того зображення, яке ми хочемо вирівняти. І тоді ми повинні використовувати атрибут align тегу img для визначення розташування. Отже, ми повинні ввести атрибут align так само, як описано в наступному блоці.

 <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> 

крок 3: Після вказівки розташування ми маємо зберегти код Html, а потім запустити файл. Існує наступний різний код Html, який показує зображення в абзаці в різних місцях:

1. Середній

Це значення вирівнювання встановлює зображення посередині.

 Align an Image at middle Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is first section in this page which describes how to specify an image at middle in a pargraph using the Html tag.</p> 
Перевірте зараз

Результати наведеного вище коду Html показано на наступному знімку екрана:

Як вирівняти зображення в Html

2. Верх

Це значення вирівнювання встановлює зображення вгорі.

 Align an Image at Top Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is Second section in this page which describes how to specify an image at top in a paragraph using the Html tag.</p> 
Перевірте зараз

Результати наведеного вище коду Html показано на наступному знімку екрана:

Як вирівняти зображення в Html

3. Дно

Це значення вирівнювання встановлює зображення внизу.

 Align an Image at bottom Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is third section in this page which describes how to specify an image at bottom in a paragraph using the Html tag.</p> 
Перевірте зараз

Результати наведеного вище коду Html показано на наступному знімку екрана:

Як вирівняти зображення в Html

4. Ліворуч

Це значення вирівнювання встановлює зображення зліва.

 Align an Image at left Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fourth section in this page which describes how to specify an image at left side of a paragraph using the Html tag.</p> 
Перевірте зараз

Результати наведеного вище коду Html показано на наступному знімку екрана:

Як вирівняти зображення в Html

5. Правильно

Це значення вирівнювання встановлює зображення праворуч.

 Align an Image at Right Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fifth section in this page which describes how to specify an image at right side of a paragraph using the Html tag.</p> 
Перевірте зараз

Результати наведеного вище коду Html показано на наступному знімку екрана:

Як вирівняти зображення в Html