CSS no Lanche

Imagine a seguinte situação: Você precisa centralizar uma imagem dentro de um box maior que a imagem e com dimensões atribuídas, caso você insira a imagem via CSS, é fácil daixá-la centralizada, mas isso não é possível quando estamos utilizando a tag <img>

Você poderia simplesmente fazer o seguinte:

• Aplicar display:block a imagem
• Definir as margens esquerda e do topo para a imagem deixando-a centralizada dentro do box.

Mas o grande problema é que você pode ter imagens no formato retrato e paisagem, imagine uma galeria de fotos com fotos de diferentes tamanhos, você teria que definir um CSS para cada imagem para que elas ficassem centralizadas.

A solução

Centralizar imagens na horizontal não é difícil, se a imagem está com seu comportamento padrão de display:inline, então um simples text-align:center já resolveria o problema e funcionaria bem em todos os browsers.

Agora para centralizar imagens na vertical, em browsers modernos, uma simples solução é atribuir display: table-cell; e vertical-align: middle ao elemento container. Só que como nessa vida nem tudo são flores, em browsers como o IE7 e inferiores essa técnica não funciona.

Para o IE7, a solução é criar uma espécie de linha, tendo como altura a altura do container e utilizar novamente vertical-align: middle. A propriedade line-height infelizmente não pode ser usada para conseguir esse efeito uma vez que ela não funciona corretamente no IE7/Win na presença de imagens. Utilizar também uma fonte com algum tamanho grande (sem especificar line-height) é problemático, por que o tamanho da caixa gerada é ligeiramente maior que o tamanho da fonte.

Felizmente o IE7 tem suporte parcial a propriedade display: inline-block. Se um elemento vazio que possua a propriedade inline-block (por exemplo um <span>) é adicinado dentro do elemento container e é atribuído ao mesmo height:100% e vertical-align: middle então ela permite justamente conseguir o que queremos.

A solução utiliza das propriedades display: table-cell e uma tag <span> extra com display: inline-block. Funciona em todos os browsers, inclusive no Internet Explorer.

Código CSS

No exemplo foi utilizado um elemento container com a classe box e o código para o IE será descrito aqui através de comentarios condicionais:

<style type="text/css">
.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.box * {
    vertical-align: middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.box span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

A marcação HTML é muito simples e é descrita logo abaixo:

<div class="box">
    	<span></span>
        <img src="" alt="" title="" />
    </div>

Vejam o exemplo em funciomanento. Essa técnica foi originalmente desenvolvida pelo desenvolvedor Bruno, veja mais informações no post original.