1

Tenho uma página e login para desenvolver e há um logo bem no centro da página. Ok, centralizei da seguinte forma:

bg{
    background-image: url("../imagens/bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 1138px;
}
   .logo {
    background-image: url("../imagens/logo.png");
    width: 140px;
    height: 101px;
    margin-left: -70px;
    left: 50%;
    position: absolute;
}

Coloquei um position:absolute e gostaria de saber se há outra forma, pois, caso contrário, tudo que vier abaixo dessa div .logo terei que colocar position e não quero isso.

HTML:

<div class="bg">        
<div class="logo"></div>
</div>

Imagem demonstrativa: inserir a descrição da imagem aqui

3
  • editei a pergunta Commented 3/11/2014 às 23:54
  • Será que nenhuma dessas técnicas (pt.stackoverflow.com/questions/5225/…) resolve o problema?
    – Wakim
    Commented 3/11/2014 às 23:55
  • O que preciso é um pouco diferente dessa vez. Eu consigo centralizar e trabalhar o resto do site perfeitamente, só que preferiria não usar position, pois tenho que ficar definindo top de cada elemento. Commented 4/11/2014 às 0:00

1 Resposta 1

3

Sem mexer na markup e sem mexer no CSS, só precisas trocar o position:absolute; para o position:relative; no elemento com a classe .logo.

Com posição absoluta: JSFiddle

Problema com elemento ao centro via "position:absolute"

Resolvido com posição relativa: JSFiddle

Elemento ao centro via "position:relative"

Efetivamente a solução passa por manter o elemento no seu lugar em relação ao fluxo do documento, o que permite que os elementos que se seguem se posicionem após o espaço ocupado pelo teu elemento .logo. Ver esta resposta para informação completa sobre position em CSS.

Com posicionamento absoluto estás a retirar o elemento do fluxo normal do documento o que te obriga a alterar a markup ou a posicionar absolutamente todos os restantes elementos.


bg{
    background-image: url("../imagens/bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 1138px;
}
.logo {
    background-color:red;
    width: 140px;
    height: 101px;
    margin-left: -70px;
    left: 50%;
    position: relative;
}
<div class="bg">        
    <div class="logo"></div>
    <form>FORM</form>
</div>

2
  • Resposta perfeita, era exatamente isso que eu estava precisando. Eu pensava que por padrão, a div era position:relative. Commented 4/11/2014 às 0:51
  • 1
    Por defeito é static por isso é que o top e left não "funcionam" sem definires pelo menos position:relative.
    – Zuul
    Commented 4/11/2014 às 0:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .