CODEWITHSUNDEEP
jqueryhtmlcenter
ScubaSteve
ScubaSteve

Reputation: 8270

Keep div centered while page width grows/shrinks

I have a floating left div so that it wraps the content. I would like to center this div. Unfortunately, since I do not know the exact width of this div, I cannot use margin: 0 auto;. So, I decided to use jQuery to center the div. I was able to do this correctly by using .outerWidth(). The issue is, I would like the div to remain centered when the page grows/shrinks. I thought setting the margin-left to a percentage would accomplish this, but it does not. Is there a way to do this?

Upvotes: 0

Views: 1611

Answers (1)

Matt Rogers
Matt Rogers

Reputation: 156

You don't need the exact width of a div to center it. You can see it working here jsfiddle.net/GkGBT

CSS

body{
    text-align:center;
 }
.centerdiv{
   background:blue;  
   display:inline-block;
   margin-left:auto;margin-right:auto;
   text-align:left;
 }

HTML

<div class="centerdiv"></div>

Upvotes: 3

Related Questions