0

I'm currently doing a redesign of a portfolio section for a website, and the idea is to have a representative image for each client that serves as a background of a link block, and when you mouse over the image, a semi-transparent overlay with some brief text summary eases in. This block can be clicked on to take the user to an individual page that describes the client and its work in more detail. The portfolio section is in flex-box display for easy responsiveness.

Here's an abridged version of what I've got: https://jsfiddle.net/ddw2m9ea/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Open Sans;
}
.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
figure {
    overflow: hidden;
    flex: 1 0 0px;
    position: relative;
    margin: 0;
    height:240px;
}
figure > img {
    width:100%;
}
a > img {
    max-width: 100%;
    vertical-align: middle;
}

I've tried applying the vertical-align: middle; to a few things that have had no effect, and currently you see that the image continues to flow further and further down, out of the container, as it gets larger. I need a solution that will vertically center the images without changing their dimensions.

ilgaar
  • 804
  • 1
  • 12
  • 31
user242007
  • 286
  • 3
  • 13

2 Answers2

0

vertical-align: middle works if you set something to display: inline-block; but not any block level element. That vertical alignment will only affect items that are in text flow (which putting something as an inline-block will accomplish).

However, you can do something like this:

figure > img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Which will always keep your image in the center of the figure, since you've already set the position to relative on the figure.

Example Fiddle

Community
  • 1
  • 1
Josh Burgess
  • 9,327
  • 33
  • 46
0

You can add a line-height property on figure, since you already set the height of the element. So you add this to your CSS figure {line-height:240px}. Hope this helps.

chixieburr
  • 16
  • 1
  • The line-height would work if the element were in text flow, which it currently isn't. You would need to give it a display of `inline` or `inline-block` to achieve that. White-space could potentially become an issue then, as well. – Josh Burgess Feb 24 '15 at 21:06