how to horizontally center a responsive div?

Question

Trying to center a div that will contain responsive adsense code.

example :

<div class="wrapper">
    <div class="adsense">adsense code here</div>
</div>

I can center the div if I type the exact measurement of the ad. so 728x90 is the max I want. At the moment I have a img as a temp placement and it works fine. Problem is if I type in exact px then it wont be responsive.

Any ideas please?

Ok this is my actual code...

<section class="main-content">
            <div class="top-banner">
                <img src="img/ad_top.jpg">
            </div>
</section>

(img is there as a placeholder for notepad++)

.main-content {
    float: left;
    width: 75%;
}

.top-banner {
    margin:0 auto;
}

this just places the img left and not center.

Possible duplicate of [How do you easily horizontally center a
using CSS?](http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css) — Liam, Nov 17 '16 at 13:37
Possible Duplicate of [http://stackoverflow.com/questions/20142606/in-a-bootstrap-responsive-page-how-to-center-a-div] — Bhavin Shah, Nov 17 '16 at 13:38

score 1 · Accepted Answer · edited Nov 17 '16 at 14:38

1

What are you talking about? Horizontal centering is done with margin: 0 auto; it doesn't matter what size the container has.

edited Nov 17 '16 at 14:38

lorond

3,856
2
37
52

answered Nov 17 '16 at 13:36

junkfoodjunkie

3,168
1
19
33

Of course it works. It's the whole point. But if you do NOT use some sort of width-setting, it will be 100% wide, which is probably not what you want. Hence, use margin, but also use max-width (the absolute max you can tolerate), and a min-width at the smallest size ad possible. And you can set width in plenty of other measurements than `px` – junkfoodjunkie Nov 17 '16 at 14:01

score 0 · Answer 2 · answered Nov 17 '16 at 13:54

0

what do u think of this?:

.wrapper{
  width:100vw;
  border:1px solid red;
}

.adsense{
  border:1px solid black;
  width:80%;
  margin:0 auto;
}

http://codepen.io/matoeil/pen/pNNRNZ

answered Nov 17 '16 at 13:54

Matoeil

6,851
11
54
77

That's better but it still doesnt center the div but i can see its behaving like i need it too...just need to tinker with it...lemme see if I can post my actual code i have up top – Andrew Barton Nov 17 '16 at 14:04
it does center the div. add .adsense{ border:1px solid black; width:80%; margin:0 auto; text-align:center } to align the text too – Matoeil Nov 17 '16 at 14:05

how to horizontally center a responsive div?

2 Answers2