I’m having a heck of a time with this and after trying to implement

Question

0

Asked: June 8, 20262026-06-08T11:52:47+00:00 2026-06-08T11:52:47+00:00

I’m having a heck of a time with this and after trying to implement

0

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"><a href="www.website.com">link to website</a></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!