centralizar galeria de imagens (ul) no meio da div

navegador2 · 4 de setembro de 2015

Caros colegas numa pagina de um site eu usei o elemento ul (lista) para formar uma galeria de imagens com pequenas fotos.
Gostaria de centralizar ela na tele e mesmo que o usuario aumentasse a largura redimensionando no browser ela continuasse no meio.
Como não estava dando certo além da section conteudoclientes eu criei uma div cilentes para ver se colocando as margins auto ela ia para o meio e não deu.
O conteúdo da section ja esta como tex-align: center, engraçado que o H1 vai para o meio automaticamente - o comportamento que eu queria que a galeria de imagem também fizesse. Envio os códigos.
Desde já agradeço
Obs sobre o forum. Quando vou postar o código aqui, depois que digitei a mensagem. Clico no item bbc Code mode, a letra da mensagem fica clara, então posto o código, mas não tenho certeza se precisa clicar nele novamente para confirmar a entrada do código, ou se é so postar... Em ambos os caso quando visualizo não da diferença. Pois vejo que quando o pessoal posta código ele sai como num pequeno quadro. Enfim apanho um pouco deste recurso do forum.
html

<section id="conteudoclientes"><!--Inicio da div conteudo que receberá o conteúdo central da tela--><h1>NOSSOS CLIENTES</h1><div id="clientes"><ul class="containerimgs"><li class="imagem"><img src="imagens/una.jpg" /></li><li class="imagem"><img src="imagens/contagem.jpg"/></li><li class="imagem"><img src="imagens/arnaldo.jpg" /></li></ul><ul class="containerimgs"><li class="imagem"><img src="imagens/fumec.jpg"/></li><li class="imagem"><img src="imagens/santamaria.jpg" /></li><li class="imagem"><img src="imagens/cittagiardino.jpg" /></li></ul><ul class="containerimgs"><li class="imagem"><img src="imagens/villadaserra.jpg"/></li><li class="imagem"><img src="imagens/itaupower.jpg" /></li><li class="imagem"><img src="imagens/puc.jpg" /></li></ul></div></section><!--Fim da div conteudo que receberá o conteúdo central da tela-->

css

section#conteudoclientes {clear:both;height:35em;padding-top:0.5em;padding-left:0.5em;padding-right:0.5em;padding-bottom: 0.5em;color:#006;background-image:url(../imagens/bg.jpg);font-family:Verdana, Geneva, sans-serif;font-size:1.4em;text-align:center;}ul.containerimgs {list-style:none;width:200px;height:400px;float:left;position:relative;left:2em;}li.imagem {width:190px;height:120px;background-colorpadding-top:20px;text-align:center;}conteudoclientes#clientes {width:100px;height:200px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}

FabianoS · 4 de setembro de 2015

@navegador2 , Defina uma largura para a div clientes e de um margin: 20px auto; e tire o posicionamento absoluto e o top,right,left,bottom.

navegador2 · 4 de setembro de 2015

@navegador2 , Defina uma largura para a div clientes e de um margin: 20px auto; e tire o posicionamento absoluto e o top,right,left,bottom.

Valeu a dica no meu aqui não deu certo.

O que fiz para simplificar o código foi remover a div clientes deixei todo o conteúdo dentro da section conteudoclientes.Porque tinha criado a div clientes apenas para tentar facilitar o alinhamento ja que não adiantou resolvi tirar.

Minha dúvida é se o ul é inline ou block. Porque neste link vi como fazer so que tem este requisito.

http://maujor.com/tutorial/centralizando-com-css-um-guia-completo.php

FabianoS · 4 de setembro de 2015

Valeu a dica no meu aqui não deu certo.

O que fiz para simplificar o código foi remover a div clientes deixei todo o conteúdo dentro da section conteudoclientes.Porque tinha criado a div clientes apenas para tentar facilitar o alinhamento ja que não adiantou resolvi tirar.

Minha dúvida é se o ul é inline ou block. Porque neste link vi como fazer so que tem este requisito.

http://maujor.com/tutorial/centralizando-com-css-um-guia-completo.php

opa amigo desculpa nao tinha visto direito seu código. nao deu certo porque a div clientes esta na "section#conteudoclientes", tire a div e so deixe a "section#conteudoclientes" depois faz o seguinte pega o "section#conteudoclientes" defina uma largura. "width:1000px" ou o tamanho que encaixe todos os ul . depois e so da uma margin: 20px auto;

navegador2 · 4 de setembro de 2015

opa amigo desculpa nao tinha visto direito seu código. nao deu certo porque a div clientes esta na "section#conteudoclientes", tire a div e so deixe a "section#conteudoclientes" depois faz o seguinte pega o "section#conteudoclientes" defina uma largura. "width:1000px" ou o tamanho que encaixe todos os ul . depois e so da uma margin: 20px auto;

Ainda não funcionou. O interessante é que usando section#conteudoclientes ul eu consigo mover a lista para esquerda ou direita usando o margin left. Agora seu eu colocar o margim auto que pela lógica centralizaria o ul no meio da section não da.

Mesmo o text-align da section estando como center... Enfim tem 2 dias que quebro a cabeça e não consigo.

FabianoS · 4 de setembro de 2015

Ainda não funcionou. O interessante é que usando section#conteudoclientes ul eu consigo mover a lista para esquerda ou direita usando o margin left. Agora seu eu colocar o margim auto que pela lógica centralizaria o ul no meio da section não da.

Mesmo o text-align da section estando como center... Enfim tem 2 dias que quebro a cabeça e não consigo.

Cara posta seu código do jeito que falei. o text-align centraliza o texto nao a div. se usar o margin: 20px auto; com a largura definida nao e pra dar erro

DiF · 4 de setembro de 2015

@navegador2

Tem alguns erros no seu CSS, além de regras desnecessárias que acabam não ajudando no que quer fazer.

Por exemplo: os paddings, posititions relative... alguns width e height.. além de chamadas erradas... por exemplo esta:

conteudoclientes#clientes

isso é errado.

O certo é:

#conteudoclientes #clientes{}

ou apenas:

#clientes{}

Então seu css ficaria assim:

#conteudoclientes {    color:#006;    background-image:url(../imagens/bg.jpg);    font-family:Verdana, Geneva, sans-serif;    font-size:1.4em;    text-align:center;}ul.containerimgs {    list-style:none;    float: left;}li.imagem {    width:190px;    height:120px;    margin: 5px;    text-align:center;}#clientes {    display: table;    margin: 0 auto;}

Veja o seu código corrigido: http://jsfiddle.net/twj676qm/

ps: redimensione a janela no JSFiddle.. verás que o elemento que engloba as listas não ordenadas ficam sempre centralizadas.

Claro que eu coloquei ali background com cores.. para você ver as delimitações... Perceba as diferenças do seu css para o meu exemplo.

navegador2 · 6 de setembro de 2015

@navegador2

Tem alguns erros no seu CSS, além de regras desnecessárias que acabam não ajudando no que quer fazer.

Por exemplo: os paddings, posititions relative... alguns width e height.. além de chamadas erradas... por exemplo esta:

conteudoclientes#clientes

isso é errado.

O certo é:
#conteudoclientes #clientes{}
ou apenas:
#clientes{}
Então seu css ficaria assim:
#conteudoclientes {    color:#006;    background-image:url(../imagens/bg.jpg);    font-family:Verdana, Geneva, sans-serif;    font-size:1.4em;    text-align:center;}ul.containerimgs {    list-style:none;    float: left;}li.imagem {    width:190px;    height:120px;    margin: 5px;    text-align:center;}#clientes {    display: table;    margin: 0 auto;}
Veja o seu código corrigido: http://jsfiddle.net/twj676qm/

ps: redimensione a janela no JSFiddle.. verás que o elemento que engloba as listas não ordenadas ficam sempre centralizadas.

Claro que eu coloquei ali background com cores.. para você ver as delimitações... Perceba as diferenças do seu css para o meu exemplo.

Resolvido

O que estava atrapalhando, como o Dif falou, foram o width e height da div clientes com eles as imagens estouravam o tamanho e ficavam todas na vertical. Ao invés do original 3x3 (3 linhas e 3 colunas cada uma com uma imagem).

Sobre o display realmente so funcionou como table eu tentei block e não deu.

Mesmo com as margens auto, so centraliza com o display:table, este é um dos pontos chaves. Como nos tutoriais geralmente so citam display inline ou block esta eu não iria conseguir desvendar tão cedo.

Outro erro como ele citou era que eu usava conteudoclientes#clientes não colocava o primeiro #. Minha lógica estava errada porque pensava que quando eu tenho um header ou footer que são reconhecidos no css apenas por header { } ou footer {} sem precisar usar o # pensava que ele ja reconheceria a conteudoclientes (que é uma section) pelo mesmo raciocinio...

Valeu Dif