Can't center-align image

Question

I'm having problems centering an image between two float-aligned pictures.

I can't add margin-left to the image in the middle. I would like it to stay centered on resizing.

My code:

#skjirt {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    float: flex;
    height: 400px;
    width: 400px;
    border: 3px solid #662C49;
    margin-top: 20px;
}

#skjirt1 {
    display: inline;
    float: left;
    margin-left: 20px;
    height: 400px;
    width: 400px;
    border: 3px solid #662C49;
    margin-top: 20px;
}

#skjirt2 {
    display: inline;
    float: right;
    height: 400px;
    width: 400px;
    border: 3px solid #662C49;
    margin-top: 20px;
    margin-right: 20px;
}

#imageWrap {
    width: 100%;
    height: auto;
    margin-top: 100px;
}

Answer 1

If you want to make the image blocks display in the middle then instead of aligning them using float, just center them by applying the text-align:center to the #imageWrap container. Also change your display:inline to display:inline-block so that the img or any other element inside the boxes conform and adjust to the parent width and height.

Below is a sample code using your classes and I modified it with the suggested solution.

P.S. The suggested solution also makes the boxes to be responsive. :)

https://codepen.io/Nasir_T/pen/wqjKoa