Jump to content
Fórum Script Brasil

Jota's

Membros
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutro

About 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;
×
×
  • Create New...