How to center DIV within a DIV? - html

Question

I have a footer which I am currently building.
I want to be able to center the 4 divs in the footer (like first paragraph or the 5 icons (which have failed to render)). What is the best way to do this?
Demo: http://jsfiddle.net/8q5ek/3/
CSS:
#insidefooter, #disclaimer {
max-width: 960px;
min-width: 960px;
margin-left: 25%;
margin-right: auto;
}
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;
background-image:url(http://i.imgur.com/yb7j6PD.png);
background-repeat:repeat;
}
#insidefooter {
margin-top: 20px;
text-align: center;
}
/*settings for social media buttons*/
#insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;
}
#insidefooterone1 h5, #insidefootertwo1 h5, #insidefooterthree1 h5, #insidefooterfour1 h5 {
text-align:left;
margin-bottom: 0;
padding-bottom: 0;
color:#FFFFFF;
padding-left: 0px;
}
#insidefooterone1 li, #insidefootertwo1 li, #insidefooterthree1 li, #insidefooterfour1 li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
padding: 0;
}
#insidefooterone1 ul, #insidefootertwo1 ul, #insidefooterthree1 ul, #insidefooterfour1 ul {
list-style: none;
text-align: left;
padding-left: 0px;
padding-right: 0;
color: #C9C9C9;
overflow: hidden;
}
#disclaimer {
margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}
#disclaimer p {
text-align:center;
color: #C9C9C9;
}
.ul_links {
overflow: auto;
display: inline-block;
min-width: 700px;
}

Answer 1

I solved your problem.
So I played around with your code a lot, did many changes, here is the result:
http://jsfiddle.net/rYjS9/7/
The actual trick was using display: inline-block; and margin-left: auto; margin-right: auto; and a couple of other stuff I have changed, as you can see from the jsfiddle. ;)
Regards

Answer 2

demo
remove
/* #insidefooter, #disclaimer {
max-width: 960px;
min-width: 960px;
margin-left: 25%;
margin-right: auto;
}*/
Add #footer in
margin 0 auto;
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;
background-image:url(http://i.imgur.com/yb7j6PD.png);
background-repeat:repeat;
margin 0 auto;
}

Answer 3

Remove below code and
#insidefooter, #disclaimer {
max-width: 960px;
min-width: 960px;
margin-left: 25%;
margin-right: auto;
}
Paste below code
#insidefooter, #disclaimer {
max-width: 960px;
min-width: 960px;
margin 0 auto;
}

Answer 4

Managed to figure it out. Thank you for your time and answers, but unfortunately, all of them failed to resolve to issue due to using a grid system (which was causing footer to distort).
What I needed to do was change the ul-links adding a position: relative and manually specifying it's position:
.ul_links{
overflow: auto;
display: inline-block;
min-width: 700px;
position: relative;
left: 120px;
}
It's probably not the best nor tidiest way to do it, but it solved the issue.
Demo