center a child div within a parent div

[MasterACE14]

I'm trying to center the 'feed_pagelinks' div at the bottom of the 'feed' div. I've got it at the bottom, but it's in the far left corner, I wish to center it and aren't having much luck. Any help is appreciated, thanks!

 

div#feed {
    border: 2px solid #555;
    padding: 4px;
    margin-bottom: 20px;
    text-align: center;
    display: block;
    min-height: 100px;
    position: relative;
}

div#feed_pagelinks {
    margin: auto;
    margin-top: 15px;
    position:absolute;
    bottom: 0;
    margin-bottom: 5px;
}

 

<div id="feed">
{{update_feed}}

{{feed}}

<div id="feed_pagelinks">| {{page_links}} |</div>
</div>

[ZulfadlyAshBurn]

try this.

div#feed {
    border: 2px solid #555;
    padding: 4px;
    margin-bottom: 20px;
    text-align: center;
    display: block;
    min-height: 100px;
    position: relative;
}

div#feed_pagelinks {
    margin:0 auto;
    margin-top: 15px;
    position:absolute;
    bottom: 0;
    margin-bottom: 5px;
}

[MasterACE14]

no change :/

[ZulfadlyAshBurn]

use this instead. i changed the position from absolute to relative for div#feed_pagelinks

 

<style>
div#feed {
    border: 2px solid #555;
    padding: 4px;
    margin-bottom: 20px;
    text-align: center;
    display: block;
    min-height: 100px;
    position: relative;
}

div#feed_pagelinks {
    margin: auto;
    margin-top: 15px;
    position:relative;
    bottom: 0;
    margin-bottom: 5px;
}

[MasterACE14]

That has done the trick! Thank you kindly mate. Appreciated.

[ZulfadlyAshBurn]

No Prob

[MasterACE14]

ah still got one problem now, it's centered but it's not at the bottom of the div anymore.

[ZulfadlyAshBurn]

if there is data in the feed, the feedlinks would be at the bottom.

[MasterACE14]

ah you're right, I've missed the obvious. I've set the top margin for the feed_pagelinks to widen that gap. Looks great now, Thanks again!

[ZulfadlyAshBurn]

haha. no prob goodluck