Skyler Skyler - 28 days ago 16
CSS Question

How to vertically center a group of bottom-aligned images?

I have 3 squares, side-by-side of different heights. I want them to be bottom-aligned with each other, but I want the entire group center-aligned within a containing box.

Seems like putting them in a wrapper whose style is

vertical-align:middle
should do it. But nope, it doesn't work.

Any suggestions on how to do this?

https://plnkr.co/edit/IjqMn5W8xZxdy0XTWrAw?p=preview



#red {
background-color: #FF0000;
height: 20px;
width: 20px;
}
#green {
background-color: #00FF00;
height: 60px;
width: 60px;
}
#blue {
background-color: #0000FF;
height: 40px;
width: 40px;
}
#container {
width: 300px;
height: 100px;
border: thin solid black;
}
#wrapper {
vertical-align: middle;
}
body {
font-size: 0;
}

<body>
<div id="container">
<div id='wrapper'>
<img id="red" src="">
<img id="green" src="">
<img id="blue" src="">
</div>
</div>
</body>




Answer
#container {
  display: table;
}
#wrapper {
  display: table-cell;
}

http://codepen.io/Deka87/pen/oYXOwg

You should use a table layout if not eager to use flexbox.