2
respostas

Dificuldade para colocar imagem ao lado do texto

Estou com dificuldade para alinhar imagem ao lado do texto

Html:

<div class="beneficios">
        <h2>Benefícios</h2>
        <ul>
            <li class="itens">Atendimento aos clientes</li>
            <li class="itens">Espaço diferenciado</li>
            <li class="itens">Localização</li>
            <li class="itens">Profissionais qualificados</li>
        </ul>
    </div>

    <img src="midias/beneficios.jpg" alt="" class="imagembeneficios" >

CSS:

.beneficios{
    background-color: white;
    padding: 20px;

}

h2 {
    text-align: center;
}

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
} 

.itens{
    font-style: italic; 
}



.imagembeneficios{
    width: 40%;
}

Resultado no navegador:
2 respostas

Olá, Igor.

Tudo bem?

A sua tag <img> está fora da <div> que tem a classe CSS beneficios , você precisa colocar a <img src="beneficios.jpg" alt="" class="imagembeneficios" > dentro da <div class="beneficios"> igual o exemplo a baixo:

<div class="beneficios">
            <h2>Benefícios</h2>
            <ul>
                <li class="itens">Atendimento aos clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais qualificados</li>
            </ul>
            <img src="beneficios.jpg" alt="" class="imagembeneficios" >
</div>

Espero ter ajudado.

Qualquer dúvida manda aqui de novo!! Valeu!

Grata Igor por expor a sua dúvida que era idêntica à minha e supergrata ao Renan que "matou a charada"!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software