Carlos Rocha 4 Posted March 7, 2017 Report Share Posted March 7, 2017 Olá, tenho o CSS ul { list-style: none; } .media, .base { display: table; height:180px; } .media .siga, .media .sigaInsta, .media .sigaFace, .media .news, .base .duvidas, .base .formaPagamento, .base .atendimento, .base .googleSecurit { display: inline-block; vertical-align:middle; width:24%; height:180px; border:#000 .01px solid; } .media .siga{ font-size: 30px; } .media .siga ul, .media .sigaInsta ul, .media .sigaFace ul, .media .news ul{ display:block; margin:0 auto; vertical-align:middle; width:100%; height:120px; border:#000 .01px solid; text-align:center; } .media .news ul { text-align:left; } .base .duvidas ul, .base .formaPagamento ul, .base .atendimento ul, .base .googleSecurit ul{ display:block; vertical-align:top; width:100%; height:160px; border: #F3C .01px solid; } .base .duvidas ul li, .base .formaPagamento ul li, .base .atendimento ul li, .base .googleSecurit ul li{ height:40px; padding:3px; } .base .cabeca { height:50px; text-transform:uppercase; font-weight:bolder; color:#FFFFFF; } E o HTML <div class="media"> <div class="sessoes"> <div class="siga"> <ul> <li>Magic for Baby</li> <li>Redes Sociais:</li> </ul> </div> <div class="sigaInsta"> <ul> <li> <a href="https://www.instagram.com/magicforbaby"> <img src="../_img/_iconesLoja/sigaInsta.png" /> </a> </li> <li> <label>Siganos no Instagram</label> </li> </div> <div class="sigaFace"> <ul> <li> <a href="https://www.facebook.com/magicforbaby"> <img src="../_img/_iconesLoja/sigaFace.png" /> </a> </li> <li> <label>Curta nossa fanpage</label> </li> </ul> </div> <div class="news"> <ul> <li> <form class="enviaNews"> <label>Receba nossas ofertas:</label> <input type="text" required id="nomeNews" placeholder="Digite seu nome" /> <input type="text" required id="emailNews" placeholder="Digite seu e-mail" /> <button id="recebaNews">Enviar</button> </form> </li> </ul> </div> </div> </div> <div class="base"> <div class="sessoes"> <div class="duvidas"> <ul> <li class="cabeca">TEM ALGUMA DÚVIDA?</li> <li>Dúvidas Frequentes (FAC)</li> <li>Como comprar?</li> </ul> </div> <div class="formaPagamento"> <ul> <li class="cabeca">FORMAS DE PAGAMENTO</li> <li><a href="https://pagseguro.uol.com.br"><img src="../_img/pagSeguro.png" /></a></li> </ul> </div> <div class="atendimento"> <ul> <li class="cabeca">FALE CONOSCO</li> <li><a href="mailto:contato@magicforbaby.com.br">contato@magicforbaby.com.br</a></li> <li>(32) 37 21460.3</li> </ul> </div> <div class="googleSecurit"> <ul> <li class="cabeca">SEGURANÇA</li> <li>Compre Seguro</li> <li><a href="https://www.google.com/transparencyreport/safebrowsing/diagnostic/index.html#url=www.magicforbaby.com.br"><img src="../_img/_iconesLoja/gSecurit.png" /></a></li> </ul> </div> </div> </div> Que podem ser vistos em: http://magicforbaby.com.br/loja/ Que são as penultimas div's, a cinza e a preta no final da página. Não estou conseguindo fazer vertical-align = middle; nos blocos. A ideia é fazer com que todos os blocos internos, a saber, as ul's, centralizadas verticalmente em ralação à sua div mãe. Grato a quem puder ajudar! Link to post Share on other sites
bruno1234 19 Posted March 7, 2017 Report Share Posted March 7, 2017 Experimenta assim: .media .siga, ... { position: relative; } .media .siga ul { ... margin: auto; position: absolute; top: 0; bottom: 0; ... } Depois, é só ajustares como queres. Matraquilhos para Android. Gratuito na Play Store. https://play.google.com/store/apps/details?id=pt.bca.matraquilhos Link to post Share on other sites
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now