← UI & UX Design

Centrar (Horizontal e Vertical)

Lida 3988 vezes

Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Pessoal, tenho aqui uma página de intro e quero centrar o seu conteúdo na página (horizontal e verticalmente). Isto é de amador (LOL), mas a verdade é que já utilizei as técnicas que conheço (e que conhecia, já fiz antes e funcionava) e agora não está a dar.

http://www.sillabori.com

Alguém me dá uma ajuda? Abraço.
Offline

mestreamateur 
Membro
Mensagens 671 Gostos 0
Feedback +1

Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Avatar Tenth year Anniversary Nineth year Anniversary Windows User Super Combination Combination Topic Starter Poll Voter Poll Starter

Centrar na vertical podes usar o valign mas se fosse a ti, tirava essas tabelas todas e metia em divs dando uma margem de top para centrar.
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Dando uma margem de top não vou estar a centrar, vou apenas estar a dar uma margem...

Quero centrar de forma "absoluta" na página.
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Offline

mestreamateur 
Membro
Mensagens 671 Gostos 0
Feedback +1

Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Avatar Tenth year Anniversary Nineth year Anniversary Windows User Super Combination Combination Topic Starter Poll Voter Poll Starter

Fixe, pensava que só havia width: 100%;

De qualquer forma, tirava as tabelas, isso é coisa do Passado
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Nada me está a dar...

No "Design" aparece-me centrado em X e Y, mas depois no Preview/Live View aparece-me apenas centrado em X...
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Segue as instruções no link (heigth no html, body e table).

Tira a div intro e dá. Mas terás de acertar os valigns uma vez que tens células com tamanhos diferentes:

http://www.screencast.com/users/AntonioAlmeida/folders/Jing/media/969ae416-1d6c-454e-bbd6-7cf6b3e1652a

Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Consegui. Finalmente...

Obrigado pela ajuda, forte abraço ; )
Offline

João Godinho 
Membro
Mensagens 1755 Gostos 2
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

line-height:100%?
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

line-height:100%?
Não. height:100% (no html, body e table)
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

http://www.google.com/search?q=vertically+center+div

Ohhh really?

Não querendo ser mauzinho... Se vim aqui pedir ajuda é porque o "Google" não me conseguiu ajudar.
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Ohhh really?

Não querendo ser mauzinho... Se vim aqui pedir ajuda é porque o "Google" não me conseguiu ajudar.

É impossível, tens lá dezenas de maneiras de como centrar uma div verticalmente, incluído com javascript.
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

É impossível, tens lá dezenas de maneiras de como centrar uma div verticalmente, incluído com javascript.

Testei umas 5 formas diferentes que encontrei. Todas elas, ao colocar depois a tabela de conteúdos, subia para cima e não centrava na vertical.

Acredito é que as formas que testei sejam de 2003, 2004, etc...

Assim sendo, o cjseven é melhor que o "Google"! :D
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

LOL

Vou-me vender ao Bing!

Posso usar-te como testemunho?! :D