Question

我正在尝试使用行高，垂直对齐方法将图像居中在div中。看看这里的例子，这里的问题，以及他们都提出的其他修正，甚至表明这是有效的。但它不适合我。

基本结构

<div class="photo_container">
    <img alt="" src="photos/1.jpg" class="thumbnail" />
</div>

CSS

div.photo_container
{
    width: 160px;
    height: 160px;
    padding: 10px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: White;
    box-shadow: 0px 0px 5px #AAA;
    text-align: center;
    line-height: 160px;
}
img.thumbnail
{
    vertical-align: middle;   
}

基本上，你可以看到容器总是160px高，但里面的图像可能是100px高。在这种情况下，我希望容器的顶部和底部有30px的间距，并且我的图像在中间垂直对齐。

我错过了什么？

ANSWERED

原来这是一个DOCTYPE问题，我正在使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我应该使用HTML 5 doctype

<!DOCTYPE html>

Answer 1

你的代码似乎对我有用..在下面的小提琴。有什么我想念的吗？

编辑：我确实为不存在的图像添加了宽度/高度。

JS Fiddle

Answer 2

doctype声明：<!doctype html>

（或者：valid code）

Answer 3

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

这应该解释如何做到这一点。

Answer 4

这似乎或多或少对我有用

见JSFiddle

<强> CSS

div.photo_container
{
    width: 160px;
    height: 160px;
    padding: 10px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: White;
    box-shadow: 0px 0px 5px #AAA;
    text-align: center;
    line-height: 160px;
    border: 1px solid red;
}
img.thumbnail
{
    vertical-align: middle;   
}

<强> HTML

<div class="photo_container">
    <img alt="" src="http://www.totalesl.com/images/icon/funny-icon.jpg" class="thumbnail" />
</div>

垂直居中图像

4 个答案: