allineamento verticale nel layout della griglia dell'elenco di blocchi inline: jquery, html, css

Ho provato a mettere l'allineamento verticale al centro nella lista (tag li) che ha mostrato il blocco in linea. Le immagini non sono allineate al centro.

Quando ho provato a dare la stessa altezza "li" e la sezione centrale al centro. La sua non funziona.

Il mio problema:

Il mio CSS:

.home_page_list .woocommerce ul.products li.product {
display: inline-block;
text-align: center;
width: 24%;
vertical-align:middle;
}

Il mio link: Clicca qui

risposte:

In questo caso, lavorare con flexbox è la scelta migliore.

Basta aggiungere questo codice al tuo CSS:

body .home_page_list .woocommerce ul.products li.product {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

Se vuoi imparare come flexbox funziona questa è una delle migliori risorse in rete: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Fondamentalmente, align-items impostato center centrerà verticalmente i bambini dell'elemento applicato agli stili.

Provare :

     align-items: center
justify-content: center
margin: 0 auto

E se non funziona, come detto sopra, prova a usare la flessibilità e la direzione della flessione