1

I'm trying to horizontally center a div-block containing images (playing cards placed there by Javascript), but somehow it doesn't work (images are still left-aligned). Here's the HTML:

<div id="dealerarea">
    <div id="dealercards">
    <!--Images by Javascript-->
    </div>
</div>

And here's the CSS:

#dealerarea{
position:absolute;
width:100%;
height:96px;
top:15px;
}
#dealercards{
display: block;
margin-left: auto;
margin-right: auto;
}

What i'm doing wrong? Thanks in advance!

Edit: I can't give a fixed "width" to inner div, because it changes every time (depending on the number of card images).

user2721820
  • 35
  • 1
  • 4
  • What happens if you give dealerarea a fixed width, rather than a % ? – DiMono Sep 06 '13 at 23:05
  • DiMono, it's still the same with fixed width. Jason, i read that post, but unlike that case my inner div has different width every time (depending on the number of card images) and i didn't find a IE 6 & 7 suitable solution for such a case there. – user2721820 Sep 06 '13 at 23:30

1 Answers1

2

You need to give your #dealercards a width and margin:0 auto ; 

#dealercards
{
display: block;
margin:0 auto;width:200px;
}

DEMO HERE

Charaf JRA
  • 8,249
  • 1
  • 34
  • 44