Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gustavo Del Vechio

Centralizar na horizontal e inline-block com espaço não calculado

Recommended Posts

Oi pessoal.

Estou estudando HTML e CSS. É tudo novo para mim. Então, essas minhas duas dúvidas devem ser coisas simples de resolver para vocês que são experientes :)

 

Com muito custo consegui desenvolver um menu na horizontal, com um submenu. Fiz um esqueleto no site JsFiddle (que uso pela primeira vez) e compartilho aqui o link:

 

https://jsfiddle.net/gustavodelvechio/v2eca515/#&togetherjs=vGxVnGT19F

 

Eu não consigo resolver duas coisas:

 

1) Não consegui alinhar o menu ao centro horizontal da página. Ele fica colado à esquerda.

 

2) Mesmo eu zerando todas as margens, ainda persiste um espaço entre os itens do menu(os "botões" com plano de fundo vermelho). Como eu poderia retirar esse espaço adicional?

 

Agradeço muito pela ajuda

 

Gustavo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi, consegui centralizar, usando text-align:center;

 

O que resta agora é saber porque os elementos com inline-block (os botões em vermelho) ficam com espaço entre eles. Estou fazendo algo errado?

 

Muito obrigado

Gustavo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por higordiasz
      Boa Tarde,
      Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
       
      Segue meu código CSS responsável pelas div.
       
      .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
       
      <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
       

       
      Alguem sabe oq posso alterar para alinhar elas corretamente ? 
    • Por donizeti.junior.ferraz
      Olá mais uma vez,

      Estou com um problema relativamente estranho, tenho alguns itens dentro de uma div pai que são gerados dinamicamente com php. Eu listei eles no css para que se exibissem um do lado do outro, como um float, só que usei o display: inline-block para isso. Funciona normal, só que em determinados itens ele apresenta uma estranha margem, o que fazer?

      O Código HTML (Lembrando que o conteúdo é gerado por PHP dinamicamente):
      <div class="produtos"> <div class="produto"> <img src="#" alt="" /> <div> <h4><a href="#">Nome do produto</a></h4> </div> </div><!-- produto --> </div><!-- produtos --> E o código CSS:
      .produtos{width:100%; height:auto; text-align:center;} .produtos .produto{width:240px; height:300px; margin:10px 2px; display:inline-block; border:1px solid #ccc; border-radius:5px;} .produtos .produto img{width:100%; height:150px; margin:0; padding:20px 0;} .produtos .produto div{width:100%; height:100px; background-color:#f8f8f8;} .produtos .produto div h4 a{color:#000;} Aqui vai um print de como ficou o resultado:


      Obrigado ;)
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.