How to align 4 Divs with image

Question

How do I align my texts and images side by side as this way below:

I researched and tested several ways to align and could not. Currently it is like this:

The code I used to do this is this:

<div align="center"><img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/box_60x52.png?v=1615594928"></div><div style=" text-align:center;"><h2>frete grátis</h2> Frete Grátis para todos as compras independente do valor.
</div>
<div align="center"><img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/cashback_60x52.png?v=1615594928"></div>
<div style="text-align:center;"><h2>SATISFAÇÃO GARANTIDA
</h2> Ou seu dinheiro de volta, sua satisfação é o nosso negócio.</div>


<div align="center"><img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/customer-service_60x52.png?v=1615594928"></div>
<div style="text-align:center;"><h2>SUPORTE ESPECIALIZADO
</h2> Obtenha rápido suporte através do whatsapp ou e-mail.
</div>
<div align="center"><img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/shield_60x52.png?v=1615594928"></div>
<div style="text-align:center;"><h2>COMPRA SEGURA
</h2> Seus dados são estão seguros protegidos por criptografia.
</div>

Answer 1

Hi, Erica, welcome home.

Your code was a bit messy so I took the liberty of tidying it up, I recommend you use css to organize things on your page, so it’s easier to get it aligned and the code isn’t so polluted.

This is the html code:

<div class="teste">
        
        <div class="teste2">
            <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/box_60x52.png?v=1615594928">
            <h2>frete grátis</h2>
            <p>Frete Grátis para todos as compras independente do valor.</p>
        </div>
        
        <div class="teste2">
            <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/cashback_60x52.png?v=1615594928">
            <h2>SATISFAÇÃO GARANTIDA</h2>
            <p>Ou seu dinheiro de volta, sua satisfação é o nosso negócio.</p> 
        </div>

        <div class="teste2">
            <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/customer-service_60x52.png?v=1615594928">
            <h2>SUPORTE ESPECIALIZADO</h2> 
            <p>Obtenha rápido suporte através do whatsapp ou e-mail.</p>
        </div>

        <div>
            <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/shield_60x52.png?v=1615594928">
            <h2>COMPRA SEGURA</h2>
            <p>Seus dados são estão seguros protegidos por criptografia.</p>
        </div>
    </div>

That’s the css part:

.teste{
    padding-top: 90px;
    text-align: center;
}

.teste2{
    float: left;
    width: 25%;
}

.teste2 p{
    text-align: center;
    padding: 10px;
}

I put the test names and teste2 can change later but remember to change in css too.

Picture of the page:

I hope I’ve helped :)

Answer 2

To help with training, we can include all Divs in another div (let’s call it "container") with the display: flex.

To understand more the display: flex, I suggest reading that other question: Grid styling for gallery using flex display

Just as @Srtecc also suggested in their response, it’s a good idea to separate styles into css. Here in example of this implementation:

.container {
    text-align: center;
    display: flex
}

.container div {
   padding: 10px
}

<div class="container">
    <div>
        <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/box_60x52.png?v=1615594928">
        <h2>FRETE GRÁTIS</h2>
        <p>Frete Grátis para todos as compras independente do valor.</p>
    </div>

    <div>
        <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/cashback_60x52.png?v=1615594928">
        <h2>SATISFAÇÃO GARANTIDA</h2>
        <p>Ou seu dinheiro de volta, sua satisfação é o nosso negócio.</p> 
    </div>

    <div>
        <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/customer-service_60x52.png?v=1615594928">
        <h2>SUPORTE ESPECIALIZADO</h2> 
        <p>Obtenha rápido suporte através do whatsapp ou e-mail.</p>
    </div>

    <div>
        <img src="https://cdn.shopify.com/s/files/1/0334/8607/7996/files/shield_60x52.png?v=1615594928">
        <h2>COMPRA SEGURA</h2>
        <p>Seus dados são estão seguros protegidos por criptografia.</p>
    </div>
</div>