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 deixá-la centralizada, mas
isso não é possível quando estamos utilizando a tag <img>.
imagem dentro de um box maior que a imagem e com dimensões atribuídas. Caso você insira a imagem via CSS, é fácil deixá-la centralizada, mas
isso não é possível quando estamos utilizando a tag <img>.
Você poderia simplesmente fazer o seguinte:
- Aplicar display:block à 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.
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.
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.
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, porque o tamanho da caixa
gerada é ligeiramente maior que o tamanho da fonte.
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, porque 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>) é adicionado dentro do elemento container e
é atribuído ao mesmo height:100% e vertical-align: middle, então ela
permite justamente conseguir o que queremos.
inline-block. Se um elemento vazio que possua a propriedade inline-block
(por exemplo um <span>) é adicionado 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.
<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:
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:
Vejam o exemplo em funciomanento. Essa técnica foi
originalmente desenvolvida pelo desenvolvedor Bruno, veja mais
informações no post original
originalmente desenvolvida pelo desenvolvedor Bruno, veja mais
informações no post original
Sign up here with your email
ConversionConversion EmoticonEmoticon