CODEWITHSUNDEEP
htmlcssresponsive
Andrew Barton
Andrew Barton

Reputation: 26

how to horizontally center a responsive div?

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.

Upvotes: 0

Views: 3372

Answers (2)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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

Upvotes: 1

Matoeil
Matoeil

Reputation: 7309

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

Upvotes: 0

Related Questions