« Quanto vale uma idéia?
Forma e Fonte »

Alinhando um Div ao centro com css

O Positivo desenvolve seus web sites em tableless.

Para centralizar um div basta fazer assim:

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.     <head>
  5.       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.       <title>Aula div com css O Positivo </title>
  7.         <style type="text/css" media="screen">
  8.         #div_centro {
  9.                 width: 300px;
  10.                 margin: 0 auto;
  11.                 border:1px solid red;
  12.                        
  13.                 }
  14.  
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="div_centro"></div>
  19.     </body>
  20. </html>

muito simples e fácil. Até a próxima dica.

Ducca - O Positivo

Artigo de Quinta-feira, 10 de Julho, 2008 às 22:14, arquivado em HTML, Sem categoria. Pode seguir os comentários a esta entrada através do feed RSS 2.0. Pode comentar ou criar um Trackback para aqui, no seu site.

11 Comentários a “Alinhando um Div ao centro com css”

  1. Bruno Massaro diz:
    7 de Setembro, 2008 às 12:12

    Ótimo artigo, sofria para deixar a div no centro.

  2. Fabio diz:
    19 de Novembro, 2008 às 1:14

    Este eskema acima não executa no IE 7.0 e 8.0 somente no FF

  3. admin diz:
    19 de Novembro, 2008 às 12:35

    Fabio, se você executar igual o que fiz com os headers etc vai funcionar sim.

    até mais Ducca

  4. Jnovais diz:
    30 de Janeiro, 2009 às 11:04

    Realemente, mesmo repetindo e seguindo as instruções no IE não funciona.

    Grato.

  5. Sergio diz:
    25 de Março, 2009 às 10:43

    Ow, não funciona no IE 7, pra falar a verdade, no IE 7 funciona melhor uma propiedade na body, a text-align.
    iria ficar:

    mas ai que mora o perigo, ja que esta propriedade está ultrapassada e a página fica com formato XHTML inválido
    Se eu achar uma solução volto a falr flw

  6. admin diz:
    25 de Março, 2009 às 10:51

    Publiquei o ex funcionando ….

    http://opositivo.selfip.com:9080/blog/div_alinhamento.html

    o div fica no centro verticalmente… quem tiver duvidas posso publicar ele Horizontalmente.

    abs

    Ducca

  7. Bruno diz:
    14 de Abril, 2009 às 17:53

    3 linhas que acabaram com horas de sofrimento. Parabéns.

    ps. Funcionou no IE6, FF 3.0, e IE7 Já no IE 5.5 não

  8. gadarf diz:
    3 de Maio, 2009 às 17:24

    Muito bom, só faltou funcionar no 5.5.

  9. Dian diz:
    5 de Junho, 2009 às 21:31

    Artigozão! meu ajudou :D

  10. Berilo diz:
    16 de Junho, 2009 às 13:52

    Valeu cara, simples facil !

  11. Paulada diz:
    22 de Julho, 2010 às 14:09

    Este dica funciona belez em todos os browsers que trabalham com padrões, portanto esqueçam o Internet Explorer, este navegador é um lixo.

    O problema é que Microsoft sabe que a maioria das pessoas usam esta bosta de navegador, então para resolver este problema, navegando no wmonline descobri que deveria jogar a linha do DOCTYPE na primeira linha do arquivo que chama as divs e resolvi o problema.

Comentar

  • Categorias

    • C# (1)
    • CAPA (13)
    • Design (2)
    • Fotografia (3)
    • HTML (2)
    • Links positivos (9)
    • PHP (6)
    • Sem categoria (2)
    • Sharepoint (3)
    • SQL (1)
    • VBA (1)
    • Visual basic (1)
  • Posts Recentes

    • Tabela Tipográfica
    • Design de logos 2009
    • Função para Paginação PHP
    • Color Blender
    • Pulseira USB
  • Páginas

    • Acerca

O + criado com WordPress
RSS Artigos e RSS Comentários.