vertical align in inline-block list grid layout

Question

I have tried to put vertical align middle in list (li tag) which has display inline-block.But images are not aligned middle.

When I tried to give same height "li" and inner section middle. Its not working.

My issue:

My CSS:

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

My link: Click here

Answer 1

在这种情况下，使用flexbox是最佳选择。

只需将此代码添加到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;
}

如果您想了解flexbox的工作原理，这是网上最好的资源之一：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

基本上，align-items设置为center将垂直居中您应用样式的元素的子元素。

Answer 2

尝试：

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

如果不起作用，如上所述，尝试使用flex和flex-direction