Olá pessoal, finalizei o curso até o modulo 4 porém eu não consigo lembrar como faço para alinhar o texto com a imagem no css. Não sei se o problema está sendo o HTML ou CSS, já tentei utilizar o <span até deu certo porém eu não consigo subir a imagem para o meio etc.. abusei do margin: para poder centralizar o subtitulo e a descrição porque eu nao estava conseguindo alinhar mas essa não é a forma correta, acredito eu.

Abaixo está o código que usei.

HTML:

`< main >
    <section class="projetos">
        < h2 class="titulo-principal">Conheça Nossos Projetos</h2>

        < div class="conteudo-projetos">
            <ul class="lista-projetos">
                <li>
                    <h3>Casas</h3>
                    <img src="img/casa1.jpg" class="img-produtos">
                    <p class="projeto-descricao">Lindos projetos de arquitetura moderna e inovadora.</p>
                    <button class="button-saiba-mais">Saiba Mais</button>
                </li>
                <li>
                    <h3>Prédios</h3>
                    <img src="img/predio1.jpg" class="img-produtos">
                    <p class="projeto-descricao"> Prédios de tirar o folêgo, combinando tecnologia e
                        praticidade</p>
                    <button class="button-saiba-mais">Saiba Mais</button>
                </li>
                <li>
                    <h3>Cômodos</h3>
                    <img src="img/quarto1.jpg" class="img-produtos">
                    <p class="projeto-descricao">A cada parte da sua casa com um toque de elegância e
                        inovação.</p>
                    <button class="button-saiba-mais">Saiba Mais</button>
                </li>
            </ul>
        </div>
    </section>
</main>`


 ** E aqui o CSS que foi usado, provavelmente deve ter um monte de erro, afinal fiz tudo sozinho tentando lembrar como era feito** 

.conteudo-projetos {
    padding-left: 4%;
    line-height: 3.5;
}
.img-produtos {
    height: 400px;
    width: 500px;
    box-shadow: 10px 5px 10px 0 #817781;
    border-radius: 10px;
}
.img-produtos:hover {
    transform: scale(1.02);
}
.lista-projetos h3 {
    text-align: center;
    margin: 14px 19px -60px -16px;

}
.projeto-descricao {
    display: inline;
    padding-left: 5%;
    position: absolute;
    margin: 80px 0px 0px -13px;
}
.projeto-descricao p {
    font-size: 30px;
}

*Imagem abaixo da pagína de como está agora:*
[Link da Foto](https://imgur.com/jiO0SdF)