Entrar Ainda não tem acesso?
2
respostas

Dificuldade para colocar imagem ao lado do texto

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Listas e divisões de conteúdo e atividade Inline e Block

por Igor Torves
| 111.1k xp | 4 posts
Analista de B.I

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
por Renan Lima
| 3697.8k xp | 7821 posts
Alura Scuba Team Apoio Educacional - Alura

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!

por Estudante
| 73.8k xp | 19 posts

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