Cómo poner la imagen en línea con el texto

Al publicar trabajos de investigación, las imágenes en línea con los datos de texto se utilizan para una mejor comprensión del usuario. Se utilizan imágenes en línea para transmitir valor e información. También admite una amplia gama de formatos de datos, incluidos "GIF", "JPG", "PNG" y "SVG". Además, los usuarios también pueden utilizar este formato para hacer la página web. Para hacerlo, HTML/CSS proporciona diferentes propiedades para agregar la imagen en línea con el texto.

Este artículo explicará:

• • Método 1: Cómo poner una imagen en línea con texto en HTML?
  • Método 2: Cómo poner una imagen en línea con texto utilizando propiedades CSS?

Método 1: Cómo poner una imagen en línea con texto en HTML?

Para poner una imagen en línea con texto en HTML, utilice un estilo en línea en HTML. Para hacerlo, siga las instrucciones dadas.

Paso 1: Agregue una imagen

Inicialmente, agregue una imagen con la ayuda del "" etiqueta. Luego, aplique el estilo en línea utilizando el "estilo" atributo. La descripción del atributo se menciona a continuación:

• • El html "estilo"La etiqueta contiene varias propiedades y pares de valor CSS que se pueden utilizar directamente. Para hacerlo, el valor de este atributo se establece como "Align vertical: medio".
  • El "alinear verticalLa propiedad se aplica para controlar la alineación vertical del elemento.
  • "SRC"Se usa para insertar un archivo multimedia dentro del elemento.

Paso 2: Haga un contenedor "Div"

A continuación, usa el "El elemento para hacer un contenedor Div en la página HTML. Luego, inserte el "estilo"Atributo con los siguientes valores:

• • "Align vertical: medio"Está configurado para el estilo en línea y la configuración de la alineación del contenedor.
  • "Pantalla: en línea"Le dice al elemento que se ajuste a sí mismo en la misma línea.
  • Después de eso, incruste el texto entre el "div" etiqueta:

La naturaleza nos proporciona paz.

Se puede notar que la imagen se ha agregado en línea con el texto en la página HTML:

Método 2: Cómo poner una imagen en línea con texto utilizando propiedades CSS?

Para poner una imagen en línea con el texto, el CSS "alinear vertical"Propiedad con el valor"medio" y "mostrar" como "en línea" puede ser aplicado.

Paso 1: Crear contenedor Div principal

Primero, cree un contenedor DIV usando el ""Etiqueta y agregue un atributo de ID con un nombre específico.

Paso 2: Crea un contenedor DIV anidado

A continuación, cree un siguiente contenedor entre el primero "div"Contenedor e inserte un"clase"Atributo con un nombre en particular. Luego, incruste el texto entre la etiqueta "div".

Paso 3: Agregar una imagen

Después de eso, agregue una imagen utilizando el "" etiqueta. Luego, agregue los atributos de la lista de abajo en la etiqueta de la imagen:

• • "SRC"Se usa para agregar el archivo multimedia. Para hacerlo, hemos establecido el nombre del archivo como el valor de este atributo.
  • "ancho" y "altura"Determina el tamaño del elemento de imagen agregado:

La naturaleza es un regalo precioso para toda la humanidad y otros organismos.

Nos proporciona aire fresco, oxígeno y belleza.

Producción

Paso 4: contenedor de estilo "div"

Acceda al elemento Div con la ayuda del valor de la identificación como "#principal":

#principal
margen: 30px 80px;
Color de fondo: RGB (217, 252, 203);
borde: 3px verde sólido;
relleno: 30px;

Luego, aplique las propiedades CSS mencionadas en el fragmento de código anterior:

• • "margen"Define un espacio fuera del límite definido.
  • "color de fondoLa propiedad asignó el color en la parte posterior del elemento definido.
  • "borde"Determina un límite alrededor del elemento.
  • "relleno"Se usa para agregar el espacio dentro del borde definido.

Paso 5: Haga una imagen en línea con texto

Acceda al contenedor DIV anidado con el nombre de la clase ".contenido principal”Y aplique las propiedades de CSS enumeradas:

.contenido principal
Altura: 100px;
Ancho: 200px;
Align vertical: medio;
Pantalla: en línea;

Aquí:

• • "altura" y "anchoLas propiedades se utilizan para configurar el tamaño del elemento.
  • "alinear vertical"Se usa para establecer la alineación vertical como"medio".
  • "mostrar"Controla cómo se maneja un elemento como un bloque o componente en línea, así como la disposición de sus hijos.

Producción

Eso se trata de poner una imagen en línea con el texto.

Conclusión

Para poner la imagen en línea con el texto, primero, agregue una imagen y un texto en el contenedor Div. Luego, el usuario puede utilizar el estilo en línea en HTML y aplicar propiedades CSS. Para hacerlo, aplique el "alinear vertical"Propiedad CSS con el valor"medio" y "mostrar" establecer como "en línea"Para poner la imagen en línea con el texto. Esta publicación explicó el método para poner la imagen en línea con el texto.