Um site responsivo pode se adaptar ao tamanho da tela e às dimensões do dispositivo em que está sendo visualizado. Junto com a capacidade de resposta do site, também é necessário que as imagens e o texto estejam alinhados e responsivos. Imagens alinhadas são aquelas que envolvem o texto em torno delas. Já o texto alinhado é aquele que se parece com um parágrafo inteiro.
Este artigo examinará o método para alinhar imagens e texto de forma responsiva.
Como alinhar imagens e texto de forma responsiva?
O conteúdo incluindo imagens e texto pode ser alinhado de forma responsiva usando Bootstrap. Para fornecer a demonstração, listamos dois exemplos:
- Centralize o texto verticalmente e a imagem horizontalmente.
- Alinhe à esquerda o texto e a imagem responsiva.
Exemplo 1: Alinhar ao centro o texto verticalmente e a imagem horizontalmente
Primeiro, tente centralizar a imagem horizontalmente e o texto verticalmente. Para isso, siga as instruções fornecidas abaixo:
Etapa 1: crie uma estrutura HTML
Ao criar uma estrutura HTML, primeiro vincule o “ Inicialização ”E também o arquivo CSS externo. Depois disso, crie um Etapa 2: aplicar CSS No contêiner: Sobre No texto: Pode-se observar que o texto está centralizado verticalmente e a imagem está centralizada horizontalmente: Exemplo 2: Alinhe o texto à esquerda e a imagem responsiva Neste exemplo dado, a imagem e o texto serão alinhados à esquerda. Para esse propósito, siga as instruções passo a passo abaixo: Etapa 1: crie uma estrutura HTML O código HTML é igual ao acima, usado no exemplo. Etapa 2: aplicar CSS No contêiner: Sobre No texto: A saída confirma que o texto e a imagem estão alinhados à esquerda: Para alinhar imagens e texto de forma responsiva, primeiro crie uma grade ou layout flexível em CSS e, em seguida, defina o “ item de alinhamento ”valor da propriedade para“ Centro ”. Isso alinhará imagens e texto de forma responsiva em CSS. Este artigo forneceu aos usuários um guia completo para alinhar imagens e texto de forma responsiva. tag e texto:
< corpo >
< divisão aula = 'recipiente' >
< img src = 'imagem-teste.jpg' tudo = 'imagem de teste' >
< classe div = 'texto' > Este é algum texto. divisão >
divisão >
corpo >
:
.recipiente {
mostrar: flexionar ;
alinhamento de texto: centro;
justificar-conteúdo: centro;
alinhar itens: centro;
}
imagem {
largura máxima: 100 % ;
altura: automático;
}
.texto {
tamanho da fonte: 16px;
largura máxima: 390px;
}
:
.recipiente {
mostrar: flexionar ;
direção flexível: coluna;
alinhar itens: flex-start;
alinhamento de texto: esquerda;
}
imagem {
largura máxima: 100 % ;
altura: automático;
}
.texto {
tamanho da fonte: 16px;
largura máxima: 390px;
}
Conclusão