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 :
<!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:
<!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:
<!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:
<!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:
<!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 |