1

Eu tenho uma div que tá 100% e tem uma imagem de background.

.bannerTotalHome {
    background: url("../imagens/bannerTotalHome.jpg") no-repeat center;
    width: 100%;
    height: 570px;
    margin: 0 auto;
}

E dentro haverá uma outra div que terá uma imagem de background.

.logoHome {
    background: url("../imagens/logoHanka.png") no-repeat center;
    width: 285px;
    height: 152px;
    position: absolute;
    left: 50%;
    margin-left: -142.5px;
}

O que acontece, é que eu centralizei o logo usando position, eu não sei se essa é a forma mais correta, ou se há uma forma mais fácil para fazer isso?

O meu HTML está assim:

<div class="bannerTotalHome p-relative">
    <div class="logoHome margin-top-110"></div>
    <div class="margin-top-375 d-block">
        <h2>SUA MELHOR ESCOLHA EM</h2>
        <h1>COMPONENTES AUTOMOTIVOS</h1>
    </div>
</div>

Nesse caso, se eu usar um margin-top dentro dessa div bannerTotalHome ele vai jogar a div bem pra baixo. Por isso pergunto se o correto para centralizar aquela div dentro da outra é da forma que eu fiz.

7
  • 1
    Já tentou com margin: 0 auto; ? 5/02/2015 às 16:57
  • Você quer centralizar horizontalmente ou verticalmente? 5/02/2015 às 16:59
  • @AndréRibeiro Horizontalmente 5/02/2015 às 17:00
  • @FelipeStoker Então margin: 0 auto; é a melhor alternativa mesmo. 5/02/2015 às 17:02
  • @RafaelWithoeft eu usei agora margin: 110px auto 0 auto; só que ele joga a div de cima pra baixo também, isso que eu não queria, tá certo? por isso usei position 5/02/2015 às 17:02

3 Respostas 3

2

A forma mais fácil e simples é utilizando margin: 0 auto. Basta que sua div pai tenha uma largura definida.

.a {
    height: 200px;
    width: 100%
}

.b {
    width: 80%;
    margin: 0 auto
}


/* somente para melhorar a visualização do exemplo */
.a{ background: #27ae60 }
.b{ background: #2ecc71; height: 100% }
<div class='a'>
    <div class='b'></div>
</div>

Uma alternativa, aproveitando que a sua div filha possui posição absolute é centralizá-la por meio das regras left e right. Por exemplo, colocando-a 10% em relação a direita e a esquerda:

.a {
    position: relative;
    height: 200px;
    width: 100%
}

.b {
    position: absolute;
    left: 10%; right: 10%;
}

/* somente para melhorar a visualização do exemplo */
.a{ background: #c0392b }
.b{ background: #e74c3c; top: 0; bottom: 0 }
<div class='a'>
    <div class='b'></div>
</div>

1

Fiz algumas modificações em seu código usando imagens da internet para simular e acredito que seja isso que você precisaria... caso não, por favor avise!

Adicionei margin: 0 auto; em sua class .logoHome

Como André Ribeiro observou, substitui o position: absolute e margin-top:110px; por padding-top: 110px;

Veja o exemplo:

http://jsfiddle.net/rafaelwithoeft/u7z38no2/2/

2
  • position: absolute e margin-top: 110px podem ser substituídos por um simples padding-top: 110px em .logoHome. Só não tenho certeza se é essa a intenção do autor da pergunta. 5/02/2015 às 17:24
  • @AndréRibeiro Concordo. Ele pode modificar até encontrar o que melhor se encaixa para ele. 5/02/2015 às 17:27
1

Olá amigo fiz um exemplo abaixo que você pode conferir no link http://jsfiddle.net/p16kLwhz/

<div class="a">
        <div class="b">
            <img src="https://www.cardvantagens.com.br/static/img/home/versao_dois/logo.png">
        </div>
    </div>

    .a{
       float:left;
       background: #CCC;
       width: 100%;
       height: 570px;
    }
     .b{
         width: 35%;
        margin: 0 auto;
     }
    .b img{
        width: 294px;
        height: 75px;
        margin-top: 50%;
        float: left;
    }

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 .