连续的 div 居中组

Question

>我有一行可以包含 3-5 个div。div 需要水平(左/右(居中。单击div"翻转"以显示其他信息。除了翻转时，居中工作正常，然后似乎divs 高度发生了变化，它们不再垂直对齐。如果我在 CSS 的第 24 行添加"float：left"，问题就会消失，但它们不再水平居中

https://jsfiddle.net/rffxmbh0/1/

#readModal>.modal-lg {
width: 100%;
margin: auto;
}
#readModalContent {
height: 420px;
}
.row-center {
text-align:center;
}
#readModal h2{
padding-left: 25px;
}
.col-centered {
padding:0;
}
.whatToReadCover {
display:inline-block;
float:none;
height: 350px;
width: 255px;
background-color: white;
border: 1px solid;
border-radius: 6px;
margin: 0 0 0 12px;
text-align: center;
}
.whatToReadCover p,
.whatToReadCover .description {
width: 170px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin:0;
}
.cover {
padding: 0px 0px 0px 30px;
}
.cover-image {
height: 250px;
display: flex;
align-items: center;
}
.whatToReadCover .description {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 17;
-webkit-box-orient: vertical;
//height: 290px;
white-space: normal;
width: 238px;
padding: 5px 0 0 0;
}
.whatToReadCover:first-child {
margin-left: 0;
}
.whatToReadCover:last-child {}
.more-info {
display: inline-block;
width: 162px;
border: 2px solid #20638f;
padding: 0.4em 0.6em;
color: #20638f;
text-decoration: none;
font-weight: 800;
font-size: 0.9em;
text-transform: uppercase;
margin: 12px 0 0 0;
float: left;
}

Answer 1

> 将.vertical-align: top添加到.whatToReadCover元素中。这对于在使用display: inline-block时将元素保持在 y 轴上的相同位置非常重要。

Answer 2

在div 中使用以下样式：

border: 1px solid #09f;
height: 40px;
width: 40px;
vertical-align: top;
display: inline-block;

Answer 3

我能够通过将display：flex添加到您的.row-center类来使其工作。

.row-center { text-align:center; display: flex; }

如果您想要 2 行，您的问题不是 100% 确定，但这为我解决了尴尬的垂直对齐问题。

https://jsfiddle.net/ow1n0gz9/