Question

在jsFiddle上查看我的代码：http://jsfiddle.net/dpMss

HTML code：

<div>
    <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="276" height="110" alt="Google China">
</div>

CSS代码：

div {
    height: 118px;
    line-height: 118px;
    background: red;
}
img {
    vertical-align: middle;
}

1，为什么我的图像无法在垂直中心显示？

2，如何让我的图片在via line-height和vertical-align CSS属性的垂直中心显示？

谢谢！

Answer 1

试试这个：

div {
  height: 300px;
  background: red;
}
div img {
  position:relative;
  top:50%;
  margin-top:-55px;
}

-55px将您的照片与真实中心对齐，它是图像高度的一半。它适用于Chrome和Firefox。 http://jsfiddle.net/b24UH/

Answer 2

像这样写：

div {
    height: 200px;
    line-height: 118px;
    background: red;
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
img {
    vertical-align: middle;
}

<强>已更新

这样写：

div {
    height: 200px;
    line-height: 200px;
    background: red;
    vertical-align: middle;
    width:100%;
}
img {
    vertical-align: middle;
}

http://jsfiddle.net/dpMss/10/

它适用于所有浏览器

为什么我的图像无法通过我的CSS代码在<div>中显示为垂直居中？</div>

2 个答案: