Question

它只是开始让我疯了，因为我无法理解为什么以下CSS模板的vertical-align仅在空的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（标题标记中的样式，正文标记顶部的ul-list）时，会忽略vertical-align 和图像放在容器的顶部。根本无法理解这里可以产生什么不同。

我甚至尝试将风格“清除：两者”前置，但没有效果。

有什么想法吗？

更新 - 为这两种情况添加了屏幕截图 vertical-align in plain html above example merged with some complex html, vertical-align ignored

Answer 1

如果有帮助，您可以找到以下代码，否则请提供一些屏幕截图，了解您获得的内容以及您的期望......

#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;     
    }

它给出了以下输出：

enter image description here

垂直对齐＆amp;行高神秘

1 个答案: