Images not centering correctly in div

Question

I have a div with 5 images in a row that are 300px each. With a 10px margin on each side they should fit in my div at 1600px wide but the last image is bumping to the next line. Why is it not fitting? After some trial and error I see that when I adjust my margins to 8.5px they fit correctly but that doesn't seem to make sense?? I don't have any other borders, padding, etc.

Here is my CSS:

#wrap {
    width: 1600px;
    margin: 0 auto;
    background-color: red;
}

.image {
    width: 300px;
    margin: 8px 10px 0 10px;
    vertical-align: text-top;
}

My HTML looks something like this:

<div id="wrap">
<div id="portfolio">
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
</div>

You've posted a lot more HTML than you have CSS, so it's difficult for us to tell you what your problem is without making assumptions. You'll need to provide us with all of the CSS to go with the HTML, so that we can tell you what the problem is. With what you've posted, we'd just be guessing unfortunately. — Woody Payne, Mar 25 '16 at 17:09
duplicate - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Paulie_D, Mar 25 '16 at 17:22

score 1 · Answer 1 · answered Mar 25 '16 at 17:17

... but the last image is bumping to the next line. Why is it not fitting?

The problem you encountered is white-space margin.

An inline element have a small margin on its right/bottom edge, making your calculation become wrong.

The simplest way to solve this is likely by setting wrap to display: flex

Dave · Accepted Answer · 2016-03-25T17:55:47.107

0

The reason for the issue:

In your example code, it's actually making the whitespace between achors into spaces (which are 4px wide each).

So instead of just anchor,anchor,anchor..., it's actually displaying anchor,space,anchor,space... etc.

Solution:

You can either use images only (no anchors) and remove the whitespace between each, or you can float the anchors left:

a { float: left; }

Here's a functional JSfiddle where it shows that by removing the anchors and space between <img> tags, it allows them to be all in the same line even without floating:

https://jsfiddle.net/q6ubzp0t/

edited Mar 25 '16 at 17:55

answered Mar 25 '16 at 17:18

Dave

28,833
23
113
183

Thank you! The explanation was helpful - I didn't know anchors add the 4px white space (still learning!) I tested your suggestions and they did work but I can't remove the anchors as they are links, and floating messed up my formatting because I have various sizes of images. I wanted to keep the anchors on my html aligned though (instead of deleting the white space between them) because I need to be able to quickly find an image and replace if needed... I browsed some other pages and this seemed to work: http://stackoverflow.com/a/18300727/6114800 but is this considered "acceptable" code? – Sophia Mar 28 '16 at 21:29
Actually, also tried making font-size: 0 on my #wrap and that seems to work better than cluttering up my html. Thanks again everyone! – Sophia Mar 28 '16 at 21:40

Ahmed · Answer 3 · 2016-03-25T17:22:12.867

-1

Here is your solution add this to your style and it will work fine

a{
  float: left;
}

edited Mar 25 '16 at 17:22

answered Mar 25 '16 at 17:16

Ahmed

1,666
17
23

Actually, although floating here is one option, it does not center the elements. – Paulie_D Mar 25 '16 at 17:21

Images not centering correctly in div

3 Answers3