← HTML + CSS

Centrar verticalmente algo dentro de um DIV

Lida 3829 vezes

Offline

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

Boas,

sou um novato nisto do html e css, ando as cabeçadas em tutoriais e a aprender coisitas aqui e ali, mas agora surgiu uma dificuldade...em algo que a 1ª vista deveria resolver na boa.

como é que eu centro algo verticalmente dentro de um DIV? (sendo isto compatível com firefox e IE)

eu até já brinquei com uns tutoriais..mas sem sucesso (penso que devido a minha fraquissima compreensão do css)

o que quero centrar verticalmente é um bloco do google adds, no html tenho isto:
Código: [Seleccione]
<div id="publi">
  <script type="text/javascript"><!--
google_ad_client = "pub-6021643811425690";
/* topo, jogosbaratos.net */
google_ad_slot = "7293807418";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

  </div>

no css tenho:
Código: [Seleccione]
#publi{margin: 0; padding: 0;overflow:hidden;display:inline-block;height: 115px;}
#publi {float:left}
#publi {width:44%;}

que alterações mínimas tenho de fazer para isto ficar centrado verticalmente dentro do div e ser compatível com IE e Firefox (os tutoriais que andei a ver tinha de meter divs dentro de div's..acabo a meter os pés pelas mãos..não existe uma coisinha mais simples?)
Offline

MiguelTavares 
Membro
Mensagens 3871 Gostos 0
Troféus totais: 33
Trófeus: (Ver todos)
Avatar Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Pela minha exp, nunca consegui... Tive de recorrer a uma tabela para que isso ficasse bem.
Offline

Roberto Francisco 
Membro
Mensagens 669 Gostos 1
Feedback +3

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

Talvez consigas fazer por aqui.... http://www.htmlstaff.org/ver.php?id=7530
Offline

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

nem o exemplo dele consigo por a funcionar(o ultimo que ele diz que não tem hacks e da em todos os browsers)...se copio na integra até funciona mas é pq o div n tem altura se especifico uma altura fica tudo no topo :(
Offline

Roberto Francisco 
Membro
Mensagens 669 Gostos 1
Feedback +3

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

nem o exemplo dele consigo por a funcionar(o ultimo que ele diz que não tem hacks e da em todos os browsers)...se copio na integra até funciona mas é pq o div n tem altura se especifico uma altura fica tudo no topo :(

E precisas MESMO de especificar a altura?
Offline

fdfandrade 
Membro
Mensagens 150 Gostos 0
Feedback +6

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

Olá,

Adiciona estás propriedades ao teu styleSheet:

Código: [Seleccione]
display:table-cell;
vertical-align:middle;
Offline

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

também não resultou:(

era isto certo?
Código: [Seleccione]
#publi{margin: 0; padding: 0;overflow:hidden;height: 115px;}
#publi {float:left}
#publi {width:44%;display:table-cell;vertical-align:middle;}

btw isto é pra por em pratica no site que esta na minha assinatura, se me souberem dizer como faço o que quero mas com tables...eskeço ja os div's e o css
Offline

fdfandrade 
Membro
Mensagens 150 Gostos 0
Feedback +6

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

Alguma coisa não deve estar bem ai...

Fiz este exemplo e funciona na perfeição...
Código: [Seleccione]
<html>
<head>
<style type="text/css">
#publi {
margin: 0;
padding: 0;
overflow:hidden;
height: 115px;
float:left
width:44%;
display:table-cell;
vertical-align:middle;
background-color: red
}
</style>
</head>
<body>
<div id="publi">
<h1>Francisco</h1>
</div>
</body>
</html>
Offline

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

n sei o que tava a fazer de errado, apaguei e copiei na integra e ficou perfeito.
 :obrigado:
Offline

fdfandrade 
Membro
Mensagens 150 Gostos 0
Feedback +6

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

Ehehe :)

Pois, devia ser ai um pormenor qq!
Offline

fil34 
Membro
Mensagens 4 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Eighth year Anniversary Seventh year Anniversary

Boas :) Também ainda sou um novato nestas coisas, mas tive a ver o teu código e apenas te queria chamar á atenção
se reparares a diferença entre o codigo do fdfandrade, ele tem na tag "style" isto:

Código: [Seleccione]
<style type="text/css">que ao contrario de ti, que em vez de teres o atributo style, tinhas script (usando javascript em vez de css), citando:
Código: [Seleccione]
<script type="text/javascript">
provavelmente, quando passavas para css aquilo que te dava não era compatível pq tavas a usar javascript, penso eu :-?
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

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

Boas fil34,

O text/javascript está ali para o adsense funcionar, não está relacionado com o CSS da div publi. Repara no html do fdfandrade, o exemplo dele é com div -> h1, enquanto o exemplo do ragnarock é div -> código javascript.