JamW

Neste post vou abordar a centralização de um elemento verticalmente e horizontalmente utilizando css.

Para tal você deverá seguir os seguintes passos:

• Definir o tamanho do elemento (div,imagem,swf) a ser posicionado. Neste exemplo vou utilizar uma div com o id= “elemento” e com o tamanho de 300×200 píxels.
• No css vou definir os parâmetros para centralização na vertical e horizontal. O código ficará assim:

  #elemento{
  background: #ffff00;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;
  }

Note que os parâmetros margin-top e margin-left correspondem a metade dos parâmetros height e width respectivamentes.

Veja aqui como ficou nosso exemplo.

Filed under: Css on May 6th, 2007