CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Joe Riggs
Joe Riggs

Reputation: 1324

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

Upvotes: 0

Views: 231

Answers (3)

DLzer
DLzer

Reputation: 159

I was able to get this to work by adding display:flex to your .row-center class.

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

Not 100% sure by your question if you want 2 separate rows, but this fixed the awkward vertical alignment issue for me.

https://jsfiddle.net/ow1n0gz9/

Upvotes: 0

Miller Mosquera
Miller Mosquera

Reputation: 119

Use these styles in your divs:

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

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18649

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.

Upvotes: 1

Related Questions