Vertically center divs to the left and right of an enlarged div in a grid

Question

I have a ul of div s in a grid that are all the same size and distance from each other. When the user selects one of the divs, it enlarges. This makes the divs to the left and right of this div look bad. I'd like them to be vertically centered so it doesn't look as off. Here's a picture of what I have:

Here's what I want:

My current CSS (I'm using SASS) is:

#grid {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    list-style-type: none;

    li {
        display: inline-block;
        overflow-y: auto;
        text-align: right;
        vertical-align: top;
        width: 140px;
        height: 140px;
        background: #000;
        padding: 10px;
        margin: 5px;
        cursor: pointer;
    }

    .selected {
        width: 250px;
        height: 250px;
    }
}

When the user selects one of the divs, I give it the class .selected , so it becomes larger than the others.

Also, how do I animate the centering/enlarging?

Answer 1

you can use vertical-align: middle to make the vertical alignment centered. To animate you can add a transition on all or just on width and height , something like this:

.box {
  width: 100px;
  height: 100px;
  background: teal;
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  transition: all 0.2s;
  or transition: width 0.2s, height 0.2s;
}

.selected {
  width: 250px;
  height: 250px;
  transition: all 0.2s;
}