Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Texto entre duas imagens. Dica pra melhorar?

<div class="main-content">
                <h2>Nossa história</h2>
                <div class="main-text">
                    <img class="column" src="forneria-pictures/pizza-small-left.png">
                    <p class="column">Localizada no coração da cidade de São João Batista - SC. A <strong>Forneria Darosci</strong> traz para você o que há de melhor em pizzas artesanais. Fundada em 2019, a forneria já é destaque na cidade e conquista novos clientes a cada dia.
                    <em class="column">Nossa missão é: <strong>"Proporcionar aos nossos cliente e os que eles amam, o que há de melhor em 
                    pizza!"</strong>.</em>
                    Oferecemos profissionais experientes e antenados no mundo da gastronomia.
                    O atendimento possui padrão de excelência e agilidade, garantindo a satisfação dos nossos clientes.</p>
                    <img class="column" src="forneria-pictures/pizza-small-right.png">
                </div>
            </div>
.main-content {
    background: #FEFEDCff;
    padding: 30px;
}

main h2 {
    text-align: center;
    font-family: garamond, georgia, serif;
    font-size: 30px;
    margin-bottom: 10px;
}

.main-text {
    padding: 20px 0;
    content: "";
    clear: both;
    display: table;
}

.main-text img {
    width: 20%;
}

.column {
  float: left;
  width: 55%;
  padding: 5px;
}

.main-text p {
    text-align: center;
}

em strong {
    font-size: 20px;
    color: #6F1D1B;
}
3 respostas
solução!

Olá Helton, tudo bem?

Para que eu possa te ajudar melhor, peço que me envie as imagens que está utilizando e o código HTML e CSS completo.

Fiz um teste colocando duas imagens fictícias e o layout está se apresentando da forma que você deseja, com o texto enquadrado entre as duas imagens, você pode visualizar clicando aqui.

Ainda assim, caso queira testar aí, você utilizar o display: flex no elemento pai desses três elementos, ou seja, o .main-text. Essa propriedade do CSS tem como padrão fazer com que os seus elementos filhos se disponham um ao lado do outro, horizontalmente.

Fico no aguardo para saber mais, abraços!

Olá Beatriz, tudo bom? Fico muito contente com sua resposta. Ainda tenho bastante dúvida sobre o uso das tags do CSS, "display" por exemplo é uma delas. Mas, como ainda estou no começo do curso, acredito que muitas das minhas duvidas ainda serão sanadas. Agradeço bastante sua dica do display: flex.

Have a good day!

Olá Helton, obrigada pelo retorno.

Caso queira saber mais sobre o flex, recomendo você se aprofundar nos conteúdos a seguir:

Abraços!