CODEWITHSUNDEEP
htmlcss
Rmilligan2372
Rmilligan2372

Reputation: 117

Centering multiple div's inside a parent div

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!

Upvotes: 1

Views: 1847

Answers (2)

j08691
j08691

Reputation: 208002

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.)

Upvotes: 2

Vivek Chandra
Vivek Chandra

Reputation: 4358

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

Upvotes: 1

Related Questions