Mitte Gruppe von divs in einer Reihe

Question

Ich habe eine Zeile, die 3-5 Divs enthalten kann. Die divs müssen horizontal (links/rechts) zentriert sein. Klicken Sie bei gedrückter Maustaste auf die Umleitung, um weitere Informationen anzuzeigen. Die Zentrierung funktioniert einwandfrei, außer wenn sie umgedreht wird, dann erscheint die divs Höhe geändert und sie sind nicht mehr vertikal ausgerichtet. Wenn ich hinzufügen: in der CSS ‚float links‘ am 24. Linie das Problem weggeht, aber dann sind sie nicht mehr horizontal

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

hinzufügen .vertical-align: top auf Ihre .whatToReadCover Elemente zentriert. Dies ist wichtig, um Elemente bei Verwendung von display: inline-block auf derselben Position auf der y-Achse zu halten.

Answer 2

Verwenden Sie diese Arten in Ihrem divs:

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

Answer 3

Ich konnte dies erhalten, indem das Hinzufügen Anzeige arbeiten: flex zu Ihrer .row-Center-Klasse.

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

nicht zu 100% Ihre Frage sicher, ob Sie wollen 2 separate Zeilen, aber diese Fest die peinliche vertikale Ausrichtung Problem für mich.

https://jsfiddle.net/ow1n0gz9/