Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
Jota's

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

Question

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 na imagem, a 3 logo está mais acima e a 4 mais a baixo; 

 

image.thumb.png.b2b133100dae3968a9a6a6de52502053.png

 

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  



  • Forum Statistics

    • Total Topics
      148503
    • Total Posts
      644172
×
×
  • Create New...