Center 1, 2 or 3 child divs in a parent div

HTML & CSS
1

Hello,

I want to center maybe one, two, three four div(s) in a parent div. So “child” divs can be variable.
I have one big picture and beneath this picture I want to put the thumbs centered under the big picture.
So as I said the number of child divs can vary, I mean sometimes is it one div, another time 2 or three divs. But independet of the number of divs, I want to have these divs centered beneath the big picture.

I hope that I’m clear enough. Is this possible with css?

Nico

2

Here is the linkhttp://www.wsvvolleybal.nl/heren1.html

3

Do you have an example of what you want? I mean, I’ve seen the page you linked to but I’m still uncertain of the effect that you want to acomplish. Do you want each picture centered, one on top of another, or do you want all of those pictures centered but side by side?

If the effect you’re after is the one you’re showing in your page, it looks like you got it (even if the html is a bit too much and maybe it could be cleaned)

4

No, on top of each other but centered side by side.

C = center of the big pictuer/div whats above my thumbs
M = margin between the two thumbs for example 5px
T1… = Thumb picture

If I have one thumb picture that it should like this

[CENTER]|----------------- C -----------------|
|–T1–|
[/CENTER]
If I have two thumb pictures that it should like this

[CENTER]|----------------- C -----------------|
|–T1–| M |–T2–|[/CENTER]

If I have three thumb pictures that it should like this

[CENTER]|----------------- C -----------------|
|–T1–| M |–T2–| M |–T3–|[/CENTER]

Make this it more clear what I mean.

5

Just have a <p> or <div> with text-align:center;, and then put the <img>s in there, and put an equal left/right margin on each of them, that should do what you need.

6

No that is not enough. The thumbs are in a div.
I ahave already text-align: center and if I do margin:0 auto or margin 0 5px doesn’t help. I have just tried it with firebug. I add float:left; then the thumbs are side by side but not centered.

7

You could try setting the divs to display: inline-block; and the partent div text-align: center. E.g.


#team_pagewrapper {
  text-align: center;
}

#team_thumbs_wrapper {
  display: inline-block;
}

However, be aware of a major flaw here: you are using the the #team_thumbs_wrapper ID more than once, which isn’t allowed with an ID. Use a class instead, which is allowed to be used multiple times. :slight_smile:

8

Yes, I see it now as well and there is another thing I see now that the “id=team_thumbs_wrapper” around every thumb. It’s a modification of an earlier page. I didn’t noticed it. Stupid.
I know you can use a ‘id’ only once on page. I will first change this, and look again.

Thanks anyway.

9

Yes, browsers seem to let you off the hook with the multiple IDs, but still better to change them to classes. But either way, that code I gave seem s to work for me.

10

Ok this is the solution in combination with solving my two other errors:

  • because first I had only one thumb and I have made it now that it is possible to add more then one thumb. But I have had forgotton to rename the id to a class
  • I my for loop I have put thumb wrapper div. So every thumb had is his ‘own’ thumb wrapper which is wrong.

My problem is solved.

Thanks.

Nico