Dúvida CSS - Como alinhar imagens e legendas lado a lado proporcionalmente

jotae
(usa Outra)

Enviado em 28/04/2020 - 15:07h

Galera, alguém poderia me ajudar? Estou querendo alinhar essas 4 imagens, títulos e respectivas legendas uma ao lado da outra, porém, as legendas da 3 e 4 imagens são diferentes das outras, o que acaba afetando a formatação, porém, quero que as imagens, texto... fiquem alinhados corretamente independente do tamanho do conteúdo que eu legendar.

HTML

.   <section id="sec">

                <div id="basicInformations">

                    

                    <figure id="laptopLogo">

                        <img src="Layouts/logos/outLaptop.png" />

                        <p class="titleImg">Web Design</p>

                        <p id="pLaptop">

                            At vero eos et accusamus dignissimos ducimus <br>

                            qui blanditiis praesentium atque corrupti <br>

                            quas molestiasexcepturi <br>

                            sint occaecati<br>

                        </p>

                    </figure>

                

                    <figure id="magnifyingGlassLogo">

                        <img src="Layouts/logos/outMagnifyngGlass.png"/>

                        <p class="titleImg">All Suport</p>

                        <p id="pMGlass">

                            Nam libero tempore, cum soluta nobis est eligendi optio <br> 

                            cumque nihil impedit quo minus id quod maxime placeat facere <br> 

                            possimus, omnis voluptas assumenda est, <br>

                            omnis dolor <br>

                        </p>

                    </figure>



                    <figure id="shoppingCartLogo">

                        <img src="Layouts/logos/shoppingCart.png"/>

                        <p class="titleImg">Best Price</p>

                        <p id="pShoppingCart">

                            Itaque earum rerum hic tenetur a sapiente <br>

                            delectus, ut aut reiciendis voluptatibus maiores alias <br> 

                            consequatur aut perferendis doloribus <br>

                            so blinded by desire, that they cannot foresee <br>

                            asperiores repellat. <br>

                        </p>

                    </figure>



                    <figure id="facebookLogo" >

                        <img src="Layouts/logos/finger.png"/>

                        <p class="titleImg">Follow Us</p>

                        <p id="pFinger">

                            On the other hand, we denounce with righteous indignation <br>

                            and dislike men who are so beguiled and demoralized by the charms <br> 

                            of pleasure of the moment, so blinded by desire <br>

                        </p>

                    </figure>



                </div>   

CSS

.  div#basicInformations{

    background-color: white;

    left: 40px;

}



div#basicInformations figure{

    display: inline-block;

    

}



div#basicInformations p{

    font-size:11px;

    text-align: center;

    color: #acacac;

    margin-left: 5px;

    

}



div#basicInformations .titleImg{

    text-align: center;

    color: #454545;

    font-size: 25px;

    font-weight: bold;

    margin-left: 5px;

    height: 100%;



}



div#basicInformations figure img{

    position: relative;

    width: 200px;

    height: 200px;

    margin: 5px;

}    

Galera, como voces podem notar no link da imagem que deixei abaixo, a 3 logo está mais acima e a 4 mais a baixo;

https://forum.scriptbrasil.com.br/uploads/monthly_2020_04/image.png.12275e17a1469e4c1cc1682ae011dddd...