Un sitio web responsivo puede adaptar el tamaño de la pantalla y las dimensiones del dispositivo en el que se visualiza. Además de la capacidad de respuesta del sitio web, también es necesario que las imágenes y el texto estén alineados y sean receptivos. Las imágenes alineadas son las que envuelven texto a su alrededor. Mientras que el texto alineado es el que parece un párrafo completo.
Este artículo analizará el método para alinear imágenes y texto de manera responsiva.
¿Cómo alinear imágenes y texto de forma responsiva?
El contenido, incluidas imágenes y texto, se puede alinear de forma receptiva mediante Bootstrap. Para proporcionar la demostración, hemos enumerado dos ejemplos:
- Alinee al centro el texto verticalmente y la imagen horizontalmente.
- Alinee a la izquierda el texto y la imagen responsiva.
Ejemplo 1: centrar el texto verticalmente y la imagen horizontalmente
Primero, intenta centrar la imagen horizontalmente y el texto verticalmente. Para ello, siga las instrucciones que se proporcionan a continuación:
Paso 1: crear una estructura HTML
Mientras crea una estructura HTML, primero vincule el archivo ' Oreja ”Y también el archivo CSS externo. Después de eso, cree un Paso 2: aplicar CSS En contenedor: En En texto: Se puede observar que el texto está centrado verticalmente y la imagen está centrada horizontalmente: Ejemplo 2: alinear a la izquierda el texto y la imagen responsiva En este ejemplo dado, la imagen y el texto estarán alineados a la izquierda. Para ello, siga las instrucciones paso a paso a continuación: Paso 1: crear una estructura HTML El código HTML es el mismo que el anterior, utilizado en el ejemplo. Paso 2: aplicar CSS En contenedor: En En texto: El resultado confirma que el texto y la imagen están alineados a la izquierda: Para alinear imágenes y texto de manera responsiva, primero cree una cuadrícula o un diseño flexible en CSS, luego configure el parámetro ' alinear elemento ” valor de la propiedad al “ centro ”. Al hacerlo, las imágenes y el texto se alinearán de manera responsiva en CSS. Este artículo ha proporcionado a los usuarios una guía completa para alinear imágenes y texto de manera receptiva. etiqueta y texto:
< cuerpo >
< div clase = 'envase' >
< img src = 'imagen-de-prueba.jpg' todo = 'Imagen de prueba' >
< clase div = 'texto' > Este es un texto. div >
div >
cuerpo >
:
.envase {
mostrar: doblar ;
alineación de texto: centro;
justificar-contenido: centro;
alinear elementos: centro;
}
imagen {
anchura máxima: 100 % ;
altura: automático;
}
.texto {
tamaño de fuente: 16px;
ancho máximo: 390px;
}
:
.envase {
mostrar: doblar ;
dirección flexible: columna;
alinear elementos: inicio flexible;
alineación de texto: izquierda;
}
imagen {
anchura máxima: 100 % ;
altura: automático;
}
.texto {
tamaño de fuente: 16px;
ancho máximo: 390px;
}
Conclusión