jriggs jriggs - 1 year ago 43
CSS Question

Center Group of divs in a row

I have a row that can contain 3-5 divs. The divs need to be horizontally (left/right) centered. On-click the divs 'flip' to show additional information. The centering is working fine except when flipped, then it appears the divs height gets changed and they are no longer vertically aligned. If I add 'float:left' on line 24 in the CSS that issue goes away, but then they are no longer centered horizontally

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 Source

Add .vertical-align: top to your .whatToReadCover elements. This is important for keeping elements at the same position on the y-axis when using display: inline-block.

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