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
.png)