Centralizar div sem centralizar conteúdo

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?
 
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>
 
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.
 
sEnte! disse:
Podes sempre fazer isto

<div id="container" style="margin: 0 auto;">
Clicar para expandir...

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

Macarroni disse:
Isso não funciona aqui, não sei bem porquê.
Antes funcionava, mas teve que ser daquela maneira.
Clicar para expandir...

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:
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.
 
sEnte! disse:
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
Clicar para expandir...

sim, tanto id como class também se usa para jquery ;)
 
sEnte! disse:
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.
Clicar para expandir...

Realmente um '}' não estava onde devia.
Agora sim, tá a funcionar com o margin: 0 auto.
 
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. ;)
 
Inicie sessão ou registe-se para poder participar.
Back
Topo