Neste tutorial, veremos como centralizar imagens com HTML e CSS. Não é nada complicado e vamos precisar disso com frequência para nossas páginas da web. Vamos ver algumas opções, uma que usamos apenas HTML, outra através do uso de CSS e por último usando Bootstrap.
HTML e CSS são duas linguagens de script da web líderes no mundo da criação de páginas da web e aplicativos. Ambas as línguas trabalham juntas nesta tarefa. Enquanto o HTML fornece uma estrutura para as páginas da web, o CSS cuida do estilo e da parte visual ou auditiva. O HTML fornece tags que envolvem os diferentes elementos de uma página e assim, juntamente com os atributos, criaremos o esqueleto do nosso site.
Diferenças entre HTML e CSSPara resumir, podemos ver as diferenças entre HTML e CSS da seguinte forma:
- HTML é mais fácil de aprender e implementar
- HTML disponível em vários idiomas
- HTML é leve e eficaz
- HTML tem segurança limitada
- HTML é um pouco lento.
- CSS tem uma biblioteca maior de atributos e estilos do que CSS
- CSS melhora o tempo de carregamento da página.
- CSS possui ótima compatibilidade e fácil manutenção.
- CSS oferece alguns problemas de desempenho
- CSS não tem segurança embutida
Recomenda-se hoje executar as etapas diretamente com CSS, mas se você for mais HTML, também poderá ter as seguintes opções.
1. Como centralizar a imagem na página da web usando apenas HTML
Apesar de fazermos essas opções para centralizar a imagem com HTML, veremos duas maneiras de fazer isso facilmente.
Imagem central com HTML e tag centralNesta opção simples é suficiente envolver a imagem com os rótulos centrais
- A parte “src” é usada para indicar o endereço do caminho da imagem.
- A parte alternativa fornece informações para a página da web sobre o nome da imagem.
Além disso, devemos atribuir uma altura e largura da imagem como esta:
altura = ”250” ”
Imagem central com HTML e meioMas no que diz respeito às imagens, este conceito de centro que vimos difere e é melhor usar um alinhamento do meio, então o código permanece o seguinte:
Se também adicionarmos texto, teremos este código:
Este exemplo será para centralizar uma imagem com texto em HTML.
Alinha a imagem ao HTML com o atributo de alinhamentoSe quisermos alinhar uma imagem horizontalmente, podemos fazê-lo de maneira semelhante ao que fazemos com o texto, ou seja, usar o atributo align dentro dos rótulos
ou. Vamos criar o código onde o atributo aparece com a tag da imagem. O rótulo é um dos que aceita o atributo align, mas o uso é diferente.
Mas, como dizemos, o rótulo
Aqui colocaríamos o texto que preencheria toda a parte direita e envolveríamos a imagem que colocamos. Continuamos preenchendo o texto solvético solvético solvético
Faremos o mesmo para alinhar o texto e a imagem à direita e à esquerda, mas substituindo “esquerda” por “direita”.
Não é recomendado, porque os aspectos de posicionamento e estilo devem ser deixados para CSS e não usados diretamente em HTML. Teremos assim um código mais fácil de manter e alterar, mas se a qualquer momento precisar dele para um pequeno e rápido teste, vale a pena conhecer.
2. Como centralizar uma imagem em uma página da web com CSS
Aqui teremos código HTML e código CSS. Começamos olhando para o HTML.
Colocamos uma classe na imagem, chamada centrada, e que nos ajudará a estilizá-la posteriormente no CSS. Abaixo está o código para centralizar a imagem.
.center {margin: 10px auto; display: bloco; } Também podemos usar o seguinte código para alinhar uma imagem usando CSS para nossa página da web:
.center {margin-left: auto; margem direita: automático; }Se isso não funcionar para você em um navegador porque o método de centralização de texto é usado, devemos indicar ao navegador que a imagem é um elemento de nível de bloco. Desta forma, podemos centralizá-lo como se fosse outro bloco. Usaremos este código:
Fazemos o elemento aparecer como um bloco, e damos a ele uma margem automática (basta que a margem seja automática nas laterais, superior e inferior você pode colocar o que quiser). Lembre-se de que se a imagem ocupar toda a largura, ela não será centralizada.
img.center {display: block; margem esquerda: automático; margem direita: automático; }
3. Como centralizar uma imagem em uma página da web usando Bootstrap
Com esta estrutura popular, tudo é mais simples, só temos que colocar a classe do bloco central na imagem.
Você terá que baixar o Bootstrap e vinculá-lo ou colocar seu CDN em nosso HTML, para isso deixo seu link abaixo:
Podemos ver o resultado da aplicação desses códigos com a imagem abaixo:
Dessa forma, podemos centralizar nossas imagens em HTML e usando CSS e, assim, fazer trabalhos web esteticamente mais bem-sucedidos.
