html - 垂直对齐和行高之谜

它开始让我发疯，因为我不明白为什么以下CSS模板的垂直对齐仅在空的html文件中起作用：

<head>
<style>
        #mylist li {
                display: inline-block;
                list-style: none;
                text-align: center;
                height: 250px;
                padding: 5px;
        }
        #mylist .imgcont {
                height: 150px;
                width: 150px;
                line-height: 150px;
                border: 1px solid red;
                padding: 5px;
                overflow: hidden;
        }
        #mylist img {
                height:120px;
                vertical-align:middle;
        }
</style>
</head>
<body>
<ul id="mylist">
    <li>
        <div class="imgcont">
          <img src="someimg.jpg" />
        </div>
    </li>
    <li>
        <div class="imgcont">
          <img src="anotherimg.jpg" />
        </div>
    </li>
</ul>
</body>

在“空” html中，是指顶部带有

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

的裸露html模板，vertical-align确实适用，并且图像在div容器中垂直居中
当我进行逐字复制并插入到更复杂的html（标头标签中的样式，body标签顶部的ul-list）中时，垂直对齐方式突然被忽略，图像放置在容器顶部。根本无法理解什么可以在这里有所作为。

我什至尝试将样式“ clear：both”都放在前面，但没有效果。

任何想法？

更新-添加了两种情况的屏幕截图

最佳答案

如果有帮助，您可能会发现以下代码，否则请提供一些屏幕截图，以了解您所得到的和期望的内容。

#mylist .imgcont {
            height: 150px;
            width: 150px;
            line-height: 150px;
            border: 1px solid red;
            padding: 5px;
            overflow: hidden;
            display:table-cell;
            vertical-align:middle;
            text-align:center;
    }

它给了我下面的输出：

关于html - 垂直对齐和行高之谜，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13531330/