Problemas para centralizar conteúdo
-
Olá pessoal, estou tendo alguns problemas para centralizar o conteúdo de uma página que removi o get_sidebar, não sou muito experiente na leitura e edição do código mas pelo que notei o conteúdo está alinhado a esquerda e a sidebar estava a direita, quando a removi ela apenas sumiu e o conteúdo não se alinhou, tentei colocar uma div como poderão ver mas o resultado foi um desastre e o conteúdo se alinhou onde anteriormente era a sidebar.
Explicando em detalhes:
Eu adicionei no meu css o seguinte:div.center { margin-left: auto; margin-right: auto; width: 8em; }
E na página eu coloquei a main-area(área onde fica o conteúdo) dentro dessa div, resultado: http://i.imgur.com/rUEDoBE.png
Imagino que estejam acontecendo conflitos entre a div que eu adicionei no css e o css responsável por esse setor, que é o seguinte:
#content-area { background-color: #fff; padding: 60px 0 120px; } #main-area { width: 640px; } .entry { margin-bottom: 60px; } .thumbnail, .alt-description { position: relative; line-height: 0; margin-bottom: 32px; } .thumbnail:before { position: absolute; -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); content: ""; top: 0; left: 0; width: 100%; height: 100%; } .description { position: absolute; content: ""; bottom: 0; left: 0; } .description h2, .alt-description h2 { font-weight: 100; font-size: 36px; background-color: #25383b; padding: 21px 30px 18px 52px; display: inline-block; } .alt-description h2 { padding-left: 30px; } .description h2 a, .alt-description h2 a { color: #fff; text-decoration: none; } .description p.meta-info, .alt-description p.meta-info { font-weight: 800; font-size: 18px; color: #fff; background-color: #c24d4d; padding: 11px 25px 12px 52px; margin-right: 17px; display: inline-block; } .alt-description p.meta-info { padding-left: 25px; } .meta-info a { color: inherit; } .meta-info a:hover { color: rgba(255,255,255,0.9); text-decoration: none; } body.archive .member-image { opacity: 1; } .member-image.small { left: -33px; bottom: 10px; top: auto; padding: 4px; border: none; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .member-image.small:before { width: 60px; height: 60px; -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); } .entry p { color: #333; } .entry blockquote { border-left: 7px solid #C24C4C; margin: 16px 0 36px; } blockquote p { font-size: 28px; padding-left: 30px; font-weight: 100; } .entry .read-more { float: right; text-decoration: none; color: #333; font-weight: 800; padding-top: 15px; } .entry .read-more:hover { color: #959494; }
Alguma sugestão? Imagino que tenha um jeito de através do css original(acima) centralizar a página, se tiver, podem me apontar como?
Obrigado!
- O tópico ‘Problemas para centralizar conteúdo’ está fechado para novas respostas.