CSS para alinhamento vertical

18 de novembro de 2007 ~ Tags:css, hack

O Bruno Fernandes e eu estávamos no MSN ontem discutindo uma forma de fazer alinhamento vertical, para uma imagem da qual não se sabe a altura.

Pensamos em uma POG de usar imagemagick no ruby para dar um resize na imagem e fixar a altura no tamanho da div. Mas não foi preciso nada disso. Via CSS:

.product1 {display: table; height: 120px; width:120px; #position: relative; overflow: hidden; background-color:#fff;}
.product2 {#position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align:center;}
.product3 {#position: relative; #top: -50%; #left: -50%;}

Fonte

Posts relacionados:

8 comentários

1. gadarf ~ 04/04/2010

Google Chrome 4.1.249.1036 Windows XP
A propriedade tabela não funciona no IE.
2. Billy Blay ~ 20/03/2010

Google Chrome 4.1.249.1036 Windows XP
Se o elemento pai tiver pelo menos uma altura fixa use o line-height
3. Lincoln ~ 22/09/2009

Mozilla Firefox 3.5.3 Windows XP
Tem uma forma bem ilustrativa explicando como fazer Alinhamento vertical e horizontal com CSS….

mas a idéia inicial é a mesma….
4. Vinicius Feitosa ~ 09/04/2009

Mozilla Firefox 3.0.8 Windows 7
Para alinhar no centro:
top :50%
left:50%
margin-left:-(tamanho da imagem/2)px;
margin-left:-(tamanho da imagem/2)px;

Simples assim.

http://www.choqueweb.com
5. Jônatas ~ 06/03/2009

Mozilla Firefox 3.0.7 Ubuntu Linux
Se não for necessário colocar o link da imagem para o usuário, somente deixar ela de fundo, têm uma maneira mais fácil:

css:

#imagem {
width: 100%;
height: 100%;
position: absolute;
background: #fff url(arquivos/imagem.jpg) no-repeat center center;
}

* o center center, alinha primeiro a imagem na horizontal no centro, e o na vertical centro de novo.
6. Aaron ~ 16/12/2008

Mozilla Firefox 3.0.4 Windows XP
q xunxo podre não existe forma de alinhamento central vertical. tem que usar tabela.
7. Raphael ~ 05/03/2008

Internet Explorer 7.0 Windows XP
Não funciona em resoluções diferentes!!!!
8. Carlos Aquino ~ 23/11/2007

Mozilla Firefox 2.0.0.9 Windows Vista
Pô,

falar de uma coisa em CSS sem mostrar um exemplo, é a mesma coisa de apresentador de programa de culinária dizendo que o sabor do prato é divino !

Todos (8) 5 últimos

Leonardo Faria

CSS para alinhamento vertical

Posts relacionados:

8 comentários

Deixe uma resposta

Últimos textos do blog

Tagcloud