La alineación de la imagen se usa para mover la imagen en diferentes ubicaciones (arriba, abajo, derecha, izquierda, centro) en nuestras páginas web. Usamos el atributo de alineación <img> para alinear la imagen. Es un elemento en línea.
Sintaxis:
<img align=”izquierda|derecha|centro|superior|inferior”>
Valores de atributos:
izquierda: Se utiliza para la alineación de la imagen a la izquierda.
right: Se utiliza para la alineación de la imagen a la derecha.
medio: Se utiliza para la alineación de la imagen al medio.
top: Se utiliza para la alineación de la imagen en la parte superior.
inferior: Se utiliza para la alineación de la imagen en la parte inferior.
Método 1: Alineación a la izquierda de la imagen
Para alinear la imagen a la izquierda, use el valor del atributo como «izquierda».
Sintaxis:
<img align=”izquierda”>
Ejemplo :
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 --> <img align="left" src="https://media.geeksforgeeks.org/wp- content/uploads/20190506164011/logo3.png" alt=""> </body> </html>
Producción:
Método 2: Alineación a la derecha de la imagen
Para alinear la imagen a la derecha, use el valor del atributo como «derecha».
Sintaxis:
<img align=”derecha”>
Ejemplo:
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 --> <img align="right" src="https://media.geeksforgeeks.org/wp- content/uploads/20190506164011/logo3.png" alt=""> </body> </html>
Producción:
Método 3: Alineación media de la imagen
Para alinear la imagen a la derecha, use el valor del atributo como «medio».
Sintaxis:
<img align=”medio”>
Ejemplo:
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" --> <h4>GeeksforGeeks <img align="middle" src="https://media.geeksforgeeks.org/wp- content/uploads/20190506164011/logo3.png" alt="">GeeksforGeeks</h4> </body> </html>
Producción:
Método 4: Alineación superior de la imagen
Para alinear la imagen a la derecha, use el valor del atributo como «superior».
Sintaxis:
<img align=”superior”>
Ejemplo:
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" --> <h4>GeeksforGeeks <img align="top" src="https://media.geeksforgeeks.org/wp- content/uploads/20190506164011/logo3.png" alt="">GeeksforGeeks</h4> </body> </html>
Producción:
Método 5: Alineación inferior de la imagen
Para alinear la imagen a la derecha, use el valor del atributo como «abajo».
Sintaxis:
<img align=”abajo”>
Ejemplo:
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" --> <h4>GeeksforGeeks <img align="bottom" src="https://media.geeksforgeeks.org/wp- content/uploads/20190506164011/logo3.png" alt="">GeeksforGeeks</h4> </body> </html>
Producción:
Soporte del navegador:
| Navegador | Versión |
|---|---|
| Cromo | 29,0 |
| Firefox | 11.0 |
| Safari | 22.0 |
| explorador de Internet | 10 |
| Ópera | 48 |
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA