Centralize one div within another 100% div

Asked

Viewed 14,756 times

1

I have a div that is 100% and has a background image.

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

And inside there will be another div that will have a background image.

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

What happens is that I centralized the logo using position, I don’t know if that’s the right way, or if there’s an easier way to do it?

My HTML is like this:

<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>

In that case, if I use one margin-top inside that div bannerTotalHome He’s going to throw the div right down. So I wonder if the right thing to center that div inside the other is the way I did it.

css
  • 1

    Already tried with margin: 0 auto; ?

  • You want to center horizontally or vertically?

  • @Andréribeiro Horizontally

  • @Felipestoker So margin: 0 auto; is the best alternative.

  • @Rafaelwithoeft I used now margin: 110px auto 0 auto; only that he plays the div from top to bottom too, that’s what I didn’t want, right? so I used position

  • @Rafaelwithoeft Create a Fiddle with your code. I did a test here but without your images I could not visualize the problem.

  • @Andréribeiro I created an example, using random images of the internet to simulate;

Show 2 more comments

3 answers

2

The easiest and simplest way is by using margin: 0 auto. It’s enough that your div parent has a defined width.

.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>

An alternative, taking advantage that your daughter div has position absolute is to centralize it through the rules left and right. For example, placing it 10% relative to the right and the left:

.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

Hello friend I made an example below that you can check on the 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;
    }

1


I made some modifications to your code using images from the internet to simulate and I believe that’s what you would need... if not, please let us know!

I added margin: 0 auto; in your class .logoHome

As André Ribeiro observed, it replaces the position: absolute e margin-top:110px; for padding-top: 110px;

Take the example:

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

  • position: absolute and margin-top: 110px may be replaced by a single padding-top: 110px in .logoHome. I am just not sure if that is the intention of the questioner.

  • @Andréribeiro I agree. He can modify until he finds what best fits him.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.