Centering multiple div's inside a parent div - html

Question

I'm having a heck of a time with this and after trying to implement what I've read in dozens of posts, I'm still not having any luck with one last part of this.
What I have is a parent div that houses two rows of additional divs. The first row is a single div and contains a label with a link. The second row contains multiple divs side-by-side.
The first row (label/link) is centering just fine. What I'm having trouble with is centering the second row of divs. They are all side-by-side, but they are displaying as if I were left-justifying them.
Here is my CSS:
div.parent-container {
position:absolute;
background-color:#fff;
top:32px;
left:-1px;
width:418px;
height:67px;
border-right:solid 1px #000;
border-left:solid 1px #000;
border-bottom:solid 1px gray;
padding-left:2px;
text-align:center;
float:left;
}
div.text-label a {
position:absolute;
background-color:#fff;
font-family:Microsoft Sans Serif,Arial;
font-weight:bold;
width:417px;
height:15px;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
div.sub-container {
position:relative;
width:30px;
height:auto;
top:20px;
float:left;
padding-right:5px;
margin-left:auto;
margin-right:auto;
}
span.span-text {
position:relative;
font-weight:bold;
font-family:Microsoft Sans Serif,Arial;
font-size:11px;
width:30px;
height:auto;
}
div.img1 {
height:26px;
width:18px;
background:url(sprite.png) -72px -144px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img2 {
height:26px;
width:18px;
background:url(sprite.png) -95px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img3 {
height:26px;
width:18px;
background:url(sprite.png) -117px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img4 {
height:26px;
width:18px;
background:url(sprite.png) -141px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
And my HTML:
<div class="parent-container">
<div class="text-label">link to website</div>
<div id='div1' class='sub-container'><span class='span-text'>text1</span>
<div class='img1'></div>
</div>
<div id='div2' class='sub-container'><span class='span-text'>text2</span>
<div class='img2'></div>
</div>
<div id='div3' class='sub-container'><span class='span-text'>text3</span>
<div class='img3'></div>
</div>
<div id='div4' class='sub-container'><span class='span-text'>text4</span>
<div class='img4'></div>
</div>
</div>
I've tried creating an additional div to house the second row of divs, but that didn't work either.
Any help is greatly appreciated!

Answer 1

jsfiddle example
You want to remove the float:left from the subcontainer divs (div.sub-container) and give them a width (about 23% due to padding, margins, etc.)

Answer 2

Encompass the 2nd row with another container if you want to center the elements/child div's within it.
Here's a Demo
also,if you want to center an element,you need to define its width,in the demo - i've given a width of 200px. which you can change as per your preference.
CSS for the container :
.textContainer{
margin: 0 auto;
width:200px; /* can be in percentage ,say 50% */
position:relative;
overflow:hidden;
}