Question

编辑：对于阅读此内容的任何人的说明，它对我不起作用的全部原因是因为我使用的是DOCTYPE TRANSITIONAL。在HTML或CSS中没有任何变化，切换到DOCTYPE STRICT使其工作。这至少适用于Chrome，FF和IE8。

我尝试过很多在线提供的解决方案，但似乎没有一个适合我。我试图在div内垂直对齐图像（图像已经水平对齐）。

图像可以是任何宽度和任何高度（最多70px），因此我不能使用固定边距或类似的东西。

这是我的HTML + CSS：

<head>
    <style type="text/css" media="all">
    #list ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    #list li {
        border: 2px solid #DDD;
        margin-bottom: 3px;
        height: 110px;
    }
    #image {
        width: 75px;
        height: 110px;
        line-height: 110px;
        float: left;
    }
    #image img {
        vertical-align: middle;
        display: block;
        margin: auto;
    }
    #event {
        margin-left: 75px;
    }
    </style>
</head>

<body>
<div id='container'>
    <div id="list">
        <ul>
            <li>
                <div id='image'>
                    <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
                </div>
                <div id='event'>
                    <h1>Text</h1>
                    <h2>More Text</h2>
                </div>
            </li>
            <li>
                <div id='image'>
                    <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
                </div>
                <div id='event'>
                    <h1>Text</h1>
                    <h2>More Text</h2>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Answer 1

您不能在块元素上使用vertical-align。图像通常是内联元素，但您可以将其明确设置为display: block。删除它，并将父div的line-height设置为div的高度。

在这里工作：http://jsfiddle.net/YnzR9/1/

#image {
    width: 75px;
    height: 100%;
    float: left;
    line-height: 110px;
    text-align: center;
}
#image img {
    vertical-align: middle;
}

Answer 2

将div的“line-height”设置为与div的高度相同的值。

更新：假设您希望图像垂直对齐并居中，请使用以下内容。

#image {
    width: 75px;
    height: 110px;
    float: left;
    line-height: 110px;
    text-align:center;
}
#image img {
    vertical-align: middle;
}

在div中垂直对齐可变大小的图像？

2 个答案: