Andrew Barton Andrew Barton - 23 days ago 9
CSS Question

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.

Answer

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