在网格中放大的 div 的左侧和右侧垂直居中 div

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