já tentei display flex e justify content center, align items center, mas a imagem não centraliza de jeito nenhum, fica no canto. ela esta dentro da tag body mas antes do primeiro h1
já tentei display flex e justify content center, align items center, mas a imagem não centraliza de jeito nenhum, fica no canto. ela esta dentro da tag body mas antes do primeiro h1
Olá, Jady.
Tudo bem?
Compartilha os seus códigos HTML e CSS aqui com a gente por favor, você pode copiar e colar eles completos aqui mesmo. Assim fica melhor para ajudar, valeu :)
Olá, obrigada, esse é o código html
<h1> Sobre o Salão Alura</h1>
<p >
Faça Cabelo, Maquiagem, Dermo pigmentação, Drenagens e Mais em Único
Local. Fale Conosco. O <strong>Salão Alura</strong> tem Serviços de Corte,
Coloração, Mechas, Progressiva, Manicure e Mais. Pacote para Noivas.
Pacote para Madrinhas. Produção Completa.
</p>
<p id="missao">
<em>Nossa missão é:<strong> autoestima e qualidade de vida aos clientes!</strong></em>
</p>
<p>
Oferecemos profisionais experientes e atendemos às mudanças no mundo da
moda. O atendimento possui padrão de excelência e agilidade, garantidindo
qualidade e satisfação dos nossos clientes.
</p>e esse o css:
body { background-color: #FFF0F5; }
#imagem { height: 50%; width: 50%; }
h1 { text-align: center; border: 5px solid #8B4513; padding: 20px; }
p { text-align: center; }
#missao { font-size: 20px }
em strong { color:#8B4513; }
Olá, Jady.
Envolve a tag <img> com uma <div> e coloca uma classe nessa div.
A <div> centraliza facilmente com um margin: 0 auto;, no caso você coloca na div o tamanho que você quer que a imagem fique, e depois coloca height: 100%; e width: 100%; na imagem para ela ocupar 100% dessa div, que já está com o tamanho que você deseja. Veja:
<div class="div-imagem">
<img id="imagem" src="banner.jpg">
</div>.div-imagem{
height: 50%;
width: 50%;
margin: 0 auto;
}
#imagem {
height: 100%;
width: 100%;
}Isso centraliza a div com a imagem dentro. Testa ai e me fala. Qualquer dúvida manda aqui. Valeu Jady :)
Olá estou com duvida também, a minha imagem não carrega chequei varias vezes e o codigo está certo porém mesmo assim a imagem não aparece no site.
<body>
<img src="banner.jpg">
<h1>Sobre a Barbearia Aslura</h1>
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</body>