CODEWITHSUNDEEP
jqueryhtmlcss
somdow
somdow

Reputation: 6318

css centering dynamic div horizontally(not working)should be simple

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???

Upvotes: 0

Views: 153

Answers (2)

albertedevigo
albertedevigo

Reputation: 18411

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;
}

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

Closing tag of <div class="portThumbsL"> is missing. Close this and try.

margin:0 auto is working I guess. Check this demo http://jsfiddle.net/85s4j/1/

If you dont want to fix the width for portSecInner then add the margin:0 25px; so that you can get the div to the center of the parent div

Upvotes: 1

Related Questions