Question

I have a div that through jquery is being dynamically inserted into another div like so

this is the jQuery:

$('#portSecW div:not(".closeXbtn")').prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');

this is regular the HTML:

<div class="portThumbsL">
<a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a>
<div class="thumbTxtSmall">2882FILMS</div>

the final output is this

<div class="portThumbsL">
<div class="portSecRollOver"><div class="portSecInner"></div></div>
<a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a>
<div class="thumbTxtSmall">2882FILMS</div>

Im doing this to animate a rollover effect im shooting for etc…in the middle of
portSecInner is where other dynamic content is inserted etc…(just text)
The parent of .portSecInner is portSecRollOver and that is absolutely positioned.

So the problem im having is that in the css i have a simple

.portSecInner{ margin:0px auto !important;}

but it doesnt center it…doesnt even move it. Now when i target it manually
for example ( margin: 10px 20px ) etc, it moves but obviously, doesn’t center everything.

Any ideas as to what i can do to correct this and get this baby centered???

Answer 1

margin: 0 auto will work only after setting a width for the element and it’s parent, like this:

.portSecRollOver {
    width: 300px;
}
.portSecInner {
    width: 200px;
    margin: 0 auto;
}