Centering floated images in div

Question

I'm trying to center floated images on my page, but I can't get it to work. Here is my code

.imcontainer {
    text-align:center;
    display:inline-block;
}.float {
    float: left;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: auto;
}

HTML

<div class="imcontainer">
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
</div>

How can I fix this problem?

If that's your actual code, take note that the floating divs are all inside each other. Is that by design? — Mr Lister, Apr 11 '13 at 13:28

score 5 · Accepted Answer · answered Apr 11 '13 at 13:35

5

You can center the container and inline-block the children to achieve the desired layout.

.imcontainer {
    text-align:center; /* center everything in the container */
}

.float { /* not really float any more so best to rename this */
    display:inline-block; /* so the children on the same line */
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: auto;
}

I would definitely correct the HTML as well to make it valid

<div class="imcontainer">
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
</div>

answered Apr 11 '13 at 13:35

andyb

43,435
12
121
150

Working demo at http://jsfiddle.net/audetwebdesign/NFWPh/ basically same idea. I would get rid of the space beneath the images. Feel free to fork and add to your answer. +1 – Marc Audet Apr 11 '13 at 13:49
Thanks, what worked perfectly. One concern is that I've heard display:inline-block is not very widely supported? Is that true? – Michael Farah Apr 11 '13 at 14:54
1

Happy to help! If you want to support IE7 and below there are [some workarounds](http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block) but every other browser going back a long way [supports it](http://caniuse.com/#search=inline-block) Click the _Show all versions_ link on that page to see a lot of green = supported :-) – andyb Apr 11 '13 at 15:03

score 1 · Answer 2 · edited Jul 01 '14 at 18:38

1

I think you want like this

http://jsfiddle.net/JZxxG/

Your CSS

.imcontainer {
    text-align: center;
    display: inline-block;
    width: 100%
}
.float {
    float: left;
    font-size: small;
    height: auto;
    width: 100%;
}

edited Jul 01 '14 at 18:38

Peter Mortensen

30,738
21
105
131

answered Apr 11 '13 at 13:35

Dhaval Marthak

17,246
6
46
68

score 0 · Answer 3 · edited Jul 01 '14 at 18:36

0

Try this:

.float {
    float: left;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: 100px;
    text-align: center;
}

edited Jul 01 '14 at 18:36

Peter Mortensen

30,738
21
105
131

answered Apr 11 '13 at 13:31

Akhil Thesiya

942
5
7

score 0 · Answer 4 · edited Jul 01 '14 at 18:38

0

Use this CSS:

.imcontainer {
    text-align: center;
}
.float {
    display: inline-block;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: auto;
}

edited Jul 01 '14 at 18:38

Peter Mortensen

30,738
21
105
131

answered Apr 11 '13 at 13:35

Abdul Malik

2,632
1
18
31

score 0 · Answer 5 · edited Jul 01 '14 at 18:39

0

@andyb has given a perfect solution, but if you are still not satisfied, you can try by adding display: table-cell; text-align: center; to your float, not to your imcontainer, and if you want some gap, add padding value.

edited Jul 01 '14 at 18:39

Peter Mortensen

30,738
21
105
131

answered Apr 11 '13 at 14:05

luxi

317
1
4
17

Centering floated images in div

HTML

5 Answers5

Linked