CODEWITHSUNDEEP
csscss-floatcentering
Michael Farah
Michael Farah

Reputation: 421

Centering floated images in div

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?

Upvotes: 2

Views: 7703

Answers (5)

luxi
luxi

Reputation: 317

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

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 1

Abdul Malik
Abdul Malik

Reputation: 2642

Use this CSS:

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

Upvotes: 0

Akhil Thesiya
Akhil Thesiya

Reputation: 950

Try this:

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

Upvotes: 0

andyb
andyb

Reputation: 43823

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>

Upvotes: 5

Related Questions