Como colocar a imagem em linha com texto

Ao publicar trabalhos de pesquisa, imagens embutidas com os dados de texto são usadas para uma melhor compreensão do usuário. Imagens embutidas são utilizadas para transmitir valor e informações. Ele também suporta uma ampla gama de formatos de dados, incluindo "GIFs", "JPG", "PNG" e "SVG". Além disso, os usuários também podem utilizar este formato para fazer a página da web. Para fazer isso, o HTML/CSS fornece propriedades diferentes para adicionar a imagem em linha com o texto.

Este artigo explicará:

• • Método 1: Como colocar uma imagem alinhada com texto em html?
  • Método 2: Como colocar uma imagem alinhada com texto usando propriedades CSS?

Método 1: Como colocar uma imagem alinhada com texto em html?

Para colocar uma imagem em linha com texto em html, utilize o estilo embutido em html. Para fazer isso, siga as instruções dadas.

Etapa 1: adicione uma imagem

Inicialmente, adicione uma imagem com a ajuda do “" marcação. Em seguida, aplique o estilo embutido, utilizando o “estilo”Atributo. A descrição do atributo é mencionada abaixo:

• • O html “estilo”A tag contém várias propriedades CSS e pares de valor que podem ser utilizados diretamente. Para fazer isso, o valor deste atributo é definido como “Alinhamento vertical: meio”.
  • O "Alinhamento vertical”A propriedade é aplicada para controlar o alinhamento vertical do elemento.
  • ““src”É usado para inserir um arquivo de mídia dentro do elemento.

Etapa 2: Faça um contêiner "div"

Em seguida, use o “”Elemento para fazer um contêiner div na página HTML. Então, insira o “estilo”Atributo com os seguintes valores:

• • ““Alinhamento vertical: meio”Está definido para estilo e definir o alinhamento do contêiner.
  • ““Exibição: embutido”Diz o elemento para se encaixar na mesma linha.
  • Depois disso, incorpore o texto entre os “div" marcação:

A natureza nos fornece paz.

Pode -se notar que a imagem foi adicionada em linha com o texto na página HTML:

Método 2: Como colocar uma imagem alinhada com texto usando propriedades CSS?

Para colocar uma imagem alinhada com o texto, o CSS “Alinhamento vertical”Propriedade com o valor“meio" e "mostrar" como "em linha" pode ser aplicado.

Etapa 1: Crie o contêiner principal da div

Primeiro, crie um recipiente de div usando o “”Tag e adicione um atributo de identificação com um nome específico.

Etapa 2: Crie um contêiner Div aninhado

Em seguida, crie um próximo contêiner entre o primeiro “div”Contêiner e insira um“aula”Atributo com um nome específico. Em seguida, incorpore texto entre a tag "div".

Etapa 3: Adicione uma imagem

Depois disso, adicione uma imagem utilizando o “" marcação. Em seguida, adicione os atributos listados abaixo na tag de imagem:

• • ““src”É usado para adicionar o arquivo de mídia. Para fazer isso, definimos o nome do arquivo como esse valor de atributo.
  • ““largura" e "altura”Determina o tamanho do elemento de imagem adicionado:

A natureza é um presente precioso para toda a humanidade e outros organismos.

Ele nos fornece ar fresco, oxigênio e beleza.

Saída

Etapa 4: estilo “Div” contêiner

Acesse o elemento div com a ajuda do valor do ID como “#principal”:

#principal
margem: 30px 80px;
cor de fundo: RGB (217, 252, 203);
borda: 3px verde sólido;
preenchimento: 30px;

Em seguida, aplique as propriedades CSS mencionadas no trecho de código acima:

• • ““margem”Define um espaço fora do limite definido.
  • ““cor de fundo”Propriedade alocou a cor na parte traseira do elemento definido.
  • ““fronteira”Determina um limite ao redor do elemento.
  • ““preenchimento”É usado para adicionar o espaço dentro da borda definida.

Etapa 5: Faça a imagem alinhada com o texto

Acesse o contêiner Div aninhado com o nome da classe “.conteúdo principal”E aplique as propriedades CSS listadas:

.conteúdo principal
Altura: 100px;
Largura: 200px;
Alinhamento vertical: meio;
exibição: embutido;

Aqui:

• • ““altura" e "largura”As propriedades são utilizadas para definir o tamanho do elemento.
  • ““Alinhamento vertical”É usado para definir o alinhamento vertical como“meio”.
  • ““mostrar”Controla como um elemento é tratado como um componente em bloco ou embutido, bem como o arranjo de seus filhos.

Saída

Isso se trata de colocar uma imagem alinhada com o texto.

Conclusão

Para colocar a imagem em linha com o texto, primeiro, adicione uma imagem e texto no contêiner Div. Em seguida, o usuário pode utilizar o estilo em linha em HTML e aplicar propriedades CSS. Para fazer isso, aplique o “Alinhamento vertical”Propriedade CSS com o valor“meio" e "mostrar”Defina como“em linha”Para colocar a imagem alinhada com o texto. Este post explicou o método para colocar a imagem em linha com o texto.