Como separar a imagem de um link. Deixar o link na parte de cima da imagem?
Como separar a imagem de um link. Deixar o link na parte de cima da imagem?
Olá Marco! Tudo bem?
Existem algumas formas de posicionar o link na parte de cima da imagem, mas eu costumo gostar muito da abordagem do display: flex, pois é prática e amigável caso no futuro você queira tornar seu projeto adaptável à dispositivos móveis. Vamos lá:
Primeiro, você irá envolver o link e a imagem em uma div e atribuir a ela a classe container. Observe a seguir:
<div class="container">
<a href="https://www.alura.com.br/">Seu link</a>
<img src="imagem.png" alt="Foto da Joana Santos programando">
</div>
Agora, no arquivo CSS do seu projeto, você pode adicionar o display: flex à classe container, o que vai tornar sua div um contêiner flexível. Isso irá te permite alinhar seus elementos como quiser:
.container{
display: flex;
gap: 20px;
flex-direction: column;
align-items: center;
height: fit-content;
}
Além do display: flex, também adicionei:
gap, que irá criar um espaço entre a imagem e o link;
flex-direction: column, que aponta que os elementos serão distribuídos em coluna;
align-items: center, para posicionar nossa div no centro da página;
height: fit-content para dizer que a altura da div será exatamente a suficiente para acomodar a imagem e o link.
Assim, o link fica separado e acima da imagem, como você pode visualizar através dessa imagem do resultado:
Espero que essa resposta tenha te ajudado. Caso ainda tenha dúvidas, fico à disposição. Um abraço!