How to align Image in HTML?
Image alignment is used to move the image at different locations (top, bottom, right, left, middle) in our web pages. We use <img> align attribute to align the image. It is an inline element.
Syntax:
<img align=”left|right|middle|top|bottom”>
Attribute Values:
left: It is used for the alignment of image to the left.
right: It is used for the alignment of image to the right.
middle: It is used for the alignment of image to the middle.
top: It is used for the alignment of image to the top.
bottom: It is used for the alignment of image to the bottom.
Method 1: Left Alignment of the image
To align the image to the left use attribute value as “left”.
Syntax:
<img align=”left”>
Example :
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Left Alignment of Image</ title > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h3 >Welcome to GeeksforGeeks</ h3 > < h4 >Left Alignment of Image</ h4 > <!-- Keep align attribute value as left --> content/uploads/20190506164011/logo3.png" alt = "" > </ body > </ html > |
Output:
Method 2: Right Alignment of the image
To align the image to the right use attribute value as “right”.
Syntax:
<img align=”right”>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Right Alignment of Image</ title > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h3 >Welcome to GeeksforGeeks</ h3 > < h4 >Right Alignment of Image</ h4 > <!-- Keep align attribute value as right --> content/uploads/20190506164011/logo3.png" alt = "" > </ body > </ html > |
Output:
Method 3: Middle Alignment of the image
To align the image to the right use attribute value as “middle”.
Syntax:
<img align=”middle”>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Image Alignment</ title > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h3 >Welcome to GeeksforGeeks</ h3 > < h4 >Middle Alignment of Image</ h4 > <!-- Keep align attribute value as "middle" --> content/uploads/20190506164011/logo3.png" alt = "" >GeeksforGeeks</ h4 > </ body > </ html > |
Output:
Method 4: Top Alignment of the image
To align the image to the right use attribute value as “top”.
Syntax:
<img align=”top”>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Image Alignment</ title > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h3 >Welcome to GeeksforGeeks</ h3 > < h4 >Top Alignment of Image</ h4 > <!-- Keep align attribute value as "top" --> content/uploads/20190506164011/logo3.png" alt = "" >GeeksforGeeks</ h4 > </ body > </ html > |
Output:
Method 5: Bottom Alignment of the image
To align the image to the right use attribute value as “bottom”.
Syntax:
<img align=”bottom”>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Image Alignment</ title > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h3 >Welcome to GeeksforGeeks</ h3 > < h4 >Bottom Alignment of Image</ h4 > <!-- Keep align attribute value as "bottom" --> content/uploads/20190506164011/logo3.png" alt = "" >GeeksforGeeks</ h4 > </ body > </ html > |
Output:
Browser Support:
Browser | Version |
---|---|
Chrome | 29.0 |
Firefox | 11.0 |
Safari | 22.0 |
Internet Explorer | 10 |
Opera | 48 |
Please Login to comment...