slightly off center when using flex

Asked Apr 07 '20 at 12:57

Active Apr 07 '20 at 12:57

Viewed 18 times

I am using justify-content: space-around; to align images in a row on my simple gallery app. The issue I am having is that no matter what I use (whether it is space-around, stretch or center) The images are not centered correctly (see images below). I have deleted the bootstrap dependency I had in my package.json as I thought that might be causing the issue and I wasn't actually using bootstrap anywhere in my app. As you can see in the image, the gap on the far left is larger than the gap on the far right.

HTML:

<ul>
    <li class="item-list-container"><app-image-item
    *ngFor="let imageEl of images"
    [image]="imageEl"
    ></app-image-item>
    </li>
</ul>

CSS:

   li {
        list-style: none;
    }

    .item-list-container {
        display: flex;
        justify-content: space-around; 
        align-items: center;
        width: 100%;
    }

asked Apr 07 '20 at 12:57

JohnDev

1

Try to use the inspect element feature from the browser to see exactly what you have there in the left; it could be a margin or padding which may be set on a parent. Usually, the `ul` has a left padding or margin, try to check that. – decebal Apr 07 '20 at 13:00
1

margin:0;padding:0 to ul – Temani Afif Apr 07 '20 at 13:01
Thanks guys I'll try these suggestions – JohnDev Apr 07 '20 at 13:25
@TemaniAfif That worked thanks! Add it as an answer and I'll mark is as correct – JohnDev Apr 07 '20 at 13:26

slightly off center when using flex

0 Answers0