always center my image in the div, portfolio page

[martijn]

Hello,

This is my first post so if i do anything that isn't allowed please tell me!
Ok so here is the problem!

I am making a new website for a client who is a painter.
She got a portfolio page were she puts up all the paintings she created, you can find that page over here http://www.striktonline.nl/herma/portfolio_herma/

The problem is the painting's all have different sizes, so we decided we want all the paintings in a square, and ones you click on them you can see the full painting!
Great that works so far!

BUT, there is a problem, because the focus of the painting is always in the center of the image the portfolio page is not good because some paintings you see just a little piece of the head...
(you can see that with the bold guy painting, its the 8 painting if you start on the top.)

What i am searching for is a little bit of css that always puts the img in the center of the div. so you always see the middle of the painting.

Hope someone can help me!

If you need any other information please tell me!
This is my first post so i dont know so good how this works...

With kind regards,
Martijn

http://www.striktonline.nl/herma/portfolio_herma/

[mmjaeger]

You may want to look into flex box.

if you add the following to the figure tag, it should work:

figure {
display: flex;
align-items: center;
}

[brock]

Cool design by the way.

[martijn]

Thank you for the compliment! thats really nice

[martijn]

Thanks for the reply,

I tried adding you css. add !important because there is still alot of cleanup to do in the css but the sad thing is it's not working.

figure {
display: flex!important;
align-items: center!important;
}

Did i miss something or do something wrong?

Thanks in advance you'r really helping me with this project as its deadline is already in the past!

[martijn]

Can somebody please take a look at this..

hope somebody can give me some help!

thank you so much

[mmjaeger]

first thing I would do is cleaning up your html code - your using an unordered list - the correct html code would be
<ul><li>Picture</li><li>Picture</li><li>Picture</li></ul>;

you have something like this:
<ul><div><li>Picture</li></div><div><li>Picture</li></div><div><li>Picture</li></div></ul>;

[Author]

Posts