Html li内的内容垂直对齐

我有HTML代码，我想对齐

li

-元素中的内容。我在

li

-元素中有图像和文本信息

我尝试了

li

-元素的

vertical align:middle

，但它不起作用

li img{
浮动：左；
显示：块；
右边距：20px；
边缘底部：15px；
宽度：75px；
高度：75px；
}

2015年3月5日


2015年3月5日

您可以稍微更改HTML并使用

显示：表格单元格

技巧。Flexbox可能也需要研究一下，尽管它还没有得到广泛的支持

HTML

<ul>
    <li>
        <div>
            <img src="images/1.jpg" alt="">
            <a class="post-title" href="#">Lorem Ipsum</a>
            <p class="post-date">March 05, 2015</p>
        </div>
    </li>
    <li>
        <div>
            <img src="images/1.jpg" alt="">
            <a class="post-title" href="#">Lorem Ipsum</a>
            <p class="post-date">March 05, 2015</p>
        </div>
    </li>
</ul>

---

li{height:75px；line height:75px；}

li div {  
    height: 200px; /*or whatever you need */
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}