1

它刚刚开始让我发疯，因为我不明白为什么以下 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 模板，并且图像在 div 容器中垂直居中
  • 当我进行逐字复制并插入更复杂的 html（标题标签中的样式，正文标签顶部的 ul-list）时，突然垂直对齐被忽略，图像被放置在容器的顶部。根本无法理解这里有什么不同。

我什至尝试添加样式“clear:both”但没有效果。

任何的想法 ？

更新 - 为这两种情况添加了屏幕截图 纯html中的垂直对齐 上面的例子合并了一些复杂的 html，vertical-align 被忽略

4

1 回答 1

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

它给了我以下输出：

在此处输入图像描述

于 2012-11-23T15:37:36.833 回答