1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Centralizar div sem centralizar conteúdo

Discussão em 'Web Development' iniciada por Macarroni, 19 de Novembro de 2012. (Respostas: 14; Visualizações: 1630)

  1. Macarroni

    Macarroni Banido

    Queria centralizar uma <div> que tem texto dentro.
    Ao centralizar a div, efetivamente, a mesma ficará no centro da página, mas o problema é que o texto que ela contém também fica centralizado lá dentro.

    Tive uma branca de CSS, alguém me ajuda nisto?
     
  2. hdd.pt

    hdd.pt Power Member

    <div align="center">conteúdo</div> não resolve?
     
  3. Zed_Blade

    Zed_Blade Power Member

    Não sei bem como tens o layout feito, mas podes sempre usar as propriedades de CSS:
    margin-right: auto
    margin-left: auto

    Que, se bem me lembro, centram a div.

    Convém que depois dentro dessa div tenha outro container para o texto, e estilizá-lo como preferires. Algo do género:

    Código:
    <div id="container">
        <div id="content">
            O texto 
        </div>
    </div>
    
     
  4. Macarroni

    Macarroni Banido

    Agora sim, obrigado amigo, abraço.
     
  5. Não existe align: center. O máximo que existe do género é o text-align:center mas essa é normalmente a pior approach.

    A melhor é fixar um valor de width no div (se ele continuar no 100% não poderá ser dado margens) e dar-lhe: margin: 0 auto;
    Esta linha faz o mesmo que o zed_blade falou no entanto é short-hand e a longo prazo no desenvolvimento nota-se diferenças de peso no ficheiro e nas linhas do ficheiro.
     
  6. esaramago123

    esaramago123 Power Member

    *centrar

    ;)
     
  7. Macarroni

    Macarroni Banido

    Tipo. Ok.
     
  8. sEnte!

    sEnte! Power Member

    o mais simples é margin:0 auto; xD
     
  9. Macarroni

    Macarroni Banido

    Isso não funciona aqui, não sei bem porquê.
    Antes funcionava, mas teve que ser daquela maneira.
     
  10. sEnte!

    sEnte! Power Member

    Podes sempre fazer isto

    <div id="container" style="margin: 0 auto;">
     
  11. mags

    mags Power Member

    Se ja tem um ID CSS porque hade ter o margin no html?

    Depende onde está a div que queres centrar. Eu normalmente uso margin auto para centrar o site...uso na div que contem o site todo. Em divs internas a história por vezes ja nao é bem assim, depende como está tudo feito
     
    Última edição: 22 de Novembro de 2012
  12. sEnte!

    sEnte! Power Member

    mags sim é verdade tens razão, eu fiz isso porque é o que costumo fazer quando estou a usar o web developer do Firefox e quero experimentar uma coisa qualquer muito rapidamente só para ver o efeito, caso contrário faz mais sentido fazer isso no CSS. :) E mesmo tendo id podes até nem usar no CSS lol já vi muitos sites em que tinha id numa div e o CSS era feito inline xD a id no caso era para usar noutras coisas como jQuery

    Macarroni já experimentas-te ver se o CSS tem as tags todas fechadas como deve ser? a fazer um template HTML5 estava a dar-me um layout diferente do que deveria dar. Reparei que me tinha esquecido de fechar duas tags. assim que as fechei ficou tudo a funcionar perfeitamente.
     
  13. mags

    mags Power Member

    sim, tanto id como class também se usa para jquery ;)
     
  14. Macarroni

    Macarroni Banido

    Realmente um '}' não estava onde devia.
    Agora sim, tá a funcionar com o margin: 0 auto.
     
  15. Zed_Blade

    Zed_Blade Power Member

    Não falei da forma short-hand (ou abreviada como quiserem chamar) porque não sei o que o user pretendia fazer relativamente às margins acima e abaixo, indicando apenas o que ele pediu: centrar horizontalmente. ;)
     

Partilhar esta Página