Ir para conteúdo
Fórum Script Brasil

Jota's

Membros
  • Total de itens

    1
  • Registro em

  • Última visita

Posts postados por Jota's

  1. 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

     

×
×
  • Criar Novo...