0

我正在尝试使用 line-height,vertical-align 方法将图像居中在 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 的间距，并且我的图像在中间垂直对齐。

我错过了什么？

已回答

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

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

当我应该使用 HTML 5 文档类型时

<!DOCTYPE html>

4

4 回答 4

1

您的代码似乎在 chrome 中对我有用。在下面摆弄。有什么我想念的吗？

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

JS小提琴

于 2012-05-10T02:34:07.597 回答
1

一个文档类型声明：<!doctype html>

（或者，或者：有效代码）

于 2012-05-10T02:36:16.200 回答
0

http://css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal-an-image/

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

于 2012-05-10T02:29:59.467 回答
0

这似乎或多或少对我有用

在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>​
于 2012-05-10T02:37:29.617 回答