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 тага за указване на местоположението. Така че трябва да напишем атрибута за подравняване, както е описано в следващия блок.

 <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