[Resolvido] Alinhar imagem ao centro de uma <li>

[Diego Macêdo 6]

Como o próprio título já diz, estou querendo alinhar uma imagem ao centro de uma <li>:

 

CSS:
li.mini{
  width:150px;
  height:150px;
}

HTML
<ul id="galeria">
  <li><img src="foto.jpg" /></li>
</ul>

As imagens possuem tamanho máximo de 100x100 pixels. Gostaria que essas imagens ficazem localizadas exatamente ao centro da "caixa <li>", tanto na horizontal como na vertical.

[Desnickadu 0]

o tamanho será sempre fixo ?

então eu alinharia com 'margin'.

e espaço é pequeno.

 

tem inumeras outras formas, mas essa acho a mais facil de fazer.

[Thiago Retondar 18]

Se for para centralizar verticalmente também e a imagem sempre possuir o mesmo valor, faça assim na imagem:

 

li img{ position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin: - 75px 0 0 -75px; }

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Diego Macêdo 6]

O tamanho da imagem não é fixa em 100x100. Como eu falei, ela tem as dimensões máxima de 100px de altura e 100px de largura.

 

Normalmente elas seguem o tamanho 100x75 ou 75x100, e por isso creio que eu n possa fazer a CSS como se fossem 100x100 pra não ficar desalinhado caso eu use o 'margin'.

[Thiago Retondar 18]

Uhhn... Sua dúvida é parecida com essa http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/386581-centralizar-imagens/

 

Veja a solução que foi dada e tente aplicar ao seu problema.

 

Tem uma imagem do resultado final? Fica mais fácil ajudar assim.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[William Bruno 1501]

Cara, eu fiz isso recentemente.. e apliquei a mesma solução em vários albuns..

 

teus albuns de fotos serão dinâmicos ? usando php, você consegue pegar ad dimensões da imagem.

centralize horizontalmente com display: block; margin: 0 auto; width: YYpx;

 

e para centralizar verticalmente

vertical-align: middle;

 

um exemplo de como funciona:

http://www.loricestetic.com.br/?galeria=1/fotos-de-buenos-aires-2007

[Diego Macêdo 6]

Isso William, exatamente! A minha galeria é em PHP.

 

Na verdade mesmo, eu quero montar o tamanho das <LI> com 150x150 e as miniaturas terão no máximo 120px, tanto na vertical como na horizontal.

 

Eu vou dar uma olhada no seu exemplo e tentar ajustar aqui no meu assim que puder e depois eu te dou um retorno do resultado.

 

Obrigado! :D

[Diego Macêdo 6]

Tentei fazer baseado no código do site que você me mandou, mas não estou conseguindo.

 

CSS:

#galerias_minis{
	width:760px;
	margin:0 auto;
	list-style:none;
}

#galerias_minis li{
	display:inline;
	float:left;
	height:100px;
	line-height:100px;
	padding:1px;
	position:relative;
	width:100px;
	margin:2px;
}

#galerias_mini li img{
	margin:0 auto;
	vertical-align:middle;
}

HTML:

<ul id="galerias_mini">
  <li><a href="#"><img src="foto.jpg" /></a></li>
  <li><a href="#"><img src="foto.jpg" /></a></li>
  <li><a href="#"><img src="foto.jpg" /></a></li>
  <li><a href="#"><img src="foto.jpg" /></a></li>
...
</ul>

EDIT - Ele criou o quadrado no tamanho 100x100 direitinho, mas não está alinhando no meio com o vertical-align.

[Evandro Oliveira 331]

li { line-height: 100px; }

[Diego Macêdo 6]

Eu achei no meu css-reset que tinha o vertical-align: baseline por algum motivo, juro que não sei porque botei.

 

Então adicionei aqui e funcionou:

#galerias_minis li a img {
	border:2px #F90 solid;
	vertical-align:middle;
}

Mas agora o problema é que não está centralizando horizontalmente.

 

CSS:

#galerias_minis{
	width:760px;
	margin:0 auto;
	list-style:none;
}

#galerias_minis li{
	display:inline;
	float:left;
	height:100px;
	line-height:100px;
	padding:1px;
	position:relative;
	width:100px;
	margin:2px;
}

#galerias_minis li a img {
	border:2px #F90 solid;
	vertical-align:middle;
        margin:0 auto; /* Se eu adiciono o margin e o display:block, ele não alinha mais na vertical e só alinha na horizontal.*/
        display:block;
}

#galerias_minis li a:hover img {
	border:2px #FFF solid;
}

[Eliseu M. 2]

Puts, dei uma olhada por aí e me parece que não haverá solução para o seu problema usando apenas o básico CSS. No CSS3, há como usando table-cell, porém não funciona em todos os browsers. Em JavaScript, você poderia inserir uma função IF para pegar o tamanho (se for muitos tamanhos, aí embaça), e atribuir certa classe para cada. Com JQuery, se o cara desabilitar o JS, já elvis :(

 

E aí, qual escolher? Eu optaria pelo JQuery, porque, mesmo se o cara desabilitar o JS, a coisa não ficará tão feia assim, ou fica alinhado horizontalmente ou verticalmente :]

 

Tutorial: http://www.tuliofaria.net/alinhamento-vertical-de-divs-com-javascript-e-jquery/

Obs.: ele ensina a alinhar verticalmente. Para alinhar horizontalmente, apenas adicione o text-align:center;

 

Falou!

[Evandro Oliveira 331]

table-cell é css2.1

[Diego Macêdo 6]

Afinal, como eu poderia resolver então isto? :P

[William Bruno 1501]

Da forma mais simples do mundo:

  Em 03/04/2010 at 16:56, 'William Bruno' disse:

usando php, você consegue pegar ad dimensões da imagem.

centralize horizontalmente com display: block; margin: 0 auto; width: YYpx;

 

http://br.php.net/getimagesize

[Evandro Oliveira 331]

a margem vem no LI não no UL

 

o problema é que flutuando e setando em linha, você perde a exibição em bloco e consequentemente o efeito margem.

 

uma coisa que eu não entendi, se a largura das fotos que é variável até 100px, porque a largura da lista é 100px e não de cada item dela?

se pretende utilizar algum efeito em javascript, procure pelas opções da livraria, as vezes pode ser até mais fácil.

 

note: definindo a ul com largura de 100px, você só terá a lista na horizontal se a mesma tiver 2 imagens de no máximo 50px ou 3 de 33px etc...

 

<ul id="menu">
   <li>
       <span>
           <img />
       </span>
   <li>
</ul>

 

#menu li {
float: left;
}

#menu li span {
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
}

[Diego Macêdo 6]

Deixa eu tentar explicar melhor o efeito que pretendo colocar.

 

Estou criando uma galeria de fotos e estou exibindo as miniaturas, onde o PHP está pegando as thumbs em uma pasta e gerando o código HTML seguindo o esquema abaixo:

<ul id="">
  <li><a href="#"><img src="foto.jpg" /></a></li>
  <li><a href="#"><img src="foto.jpg" /></a></li>
  <li><a href="#"><img src="foto.jpg" /></a></li>
  <li><a href="#"><img src="foto.jpg" /></a></li>
</ul>

Visualmente falando, eu quero que ele tenha o mesmo efeito que eu criasse uma tabela e as miniaturas ficassem alinhadas ao centro, tanto na vertical como na horizontal.

 

Imaginando ser uma tabela, seria como eu fixasse o tamanho das <td> a um tamanho de 100x100 e as miniaturas dentro dela seriam variáveis até o tamanho máximo de 100px.

 

Com o código CSS do meu post ali emcima, eu consegui alinhar ao centro verticalmente, mas agora o problema está sendo colocar também alinhado na horizontal simultâneamente, pois só consigo ou um ou outro.

 

Estive pensando em fazer 2 IDs, uma pra alinhar na horizontal e outra na vertical, e botar o PHP pra verificar as dimensões da imagem e dependendo se a imagem está na horizontal ou vertical, ele aplicar o ID que irá alinhá-lo corretamente.

 

William, isso que você me mostrou aí, seria pra eu pegar pelo PHP a dimensão e preencher no lugar de "YY" do "width: YYpx"? Em qual seletor eu deveria aplicar isto?

[Evandro Oliveira 331]

basta utilizar o código que te passei trocando 'span' por 'a'

[William Bruno 1501]

  Em 05/04/2010 at 16:04, 'Diego Macêdo' disse:

William, isso que você me mostrou aí, seria pra eu pegar pelo PHP a dimensão e preencher no lugar de "YY" do "width: YYpx"? Em qual seletor eu deveria aplicar isto?

 

sim. inline, diretamente na tag img.

[Diego Macêdo 6]

Consegui William!

 

Muito obrigado pela ajuda!

[Diego Macêdo 6]

Gostaria que fosse re-aberto este tópico, pois estou com a mesma dúvida, só que com uma leve modificação.

 

Estou querendo montar 2 classes, uma para fotos na horizontal e outra pras verticais. E fazer com que o PHP através do getimagesize() ele defina qual classe será posta na <img> para alinhar dentro da <li>.

 

Com o meu código abaixo, já está centralizando as fotos verticais, mas eu gostaria que não fizesse isso, só quando eu aplicasse as devidas classes pra executar isso.

 

Segue meu código CSS:

#galerias_minis{
        width:760px;
        margin:0 auto;
        list-style:none;
}

#galerias_minis li{
        display:inline;
        float:left;
        height:100px;
        line-height:100px;
        padding:1px;
        position:relative;
        width:100px;
        margin:2px;
}

#galerias_minis li a img {
        border:2px #F90 solid;
        vertical-align:middle;
        margin:0 auto; /* Se eu adiciono o margin e o display:block, ele não alinha mais na vertical e só alinha na horizontal.*/
        display:block;
}

#galerias_minis li a:hover img {
        border:2px #FFF solid;
}

#galerias_minis li a {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	line-height: 100px;
	vertical-align:middle;
}

.foto_horizontal{

}

.foto_vertical{

}