Skyler Skyler - 1 year ago 88
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

should do it. But nope, it doesn't work.

Any suggestions on how to do this?

#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;

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

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download