为什么我的图片无法在
中垂直居中显示通过我的 CSS 代码？

发布于 2025-01-06 08:03:43 字数 577 浏览 0 评论 0原文

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

HTML 代码：

<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、如何通过line-height和vertical-align CSS属性让我的图像垂直居中显示？

谢谢你！

原文

See my codes on jsFiddle: http://jsfiddle.net/dpMss

HTML codes:

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

CSS codes:

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

1, Why my image can't be displayed vertical center in ?

2, How to let my image be displayed in vertical center in via line-height and vertical-align CSS properties?

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城已无爱 2025-01-13 08:03:43

试试这个：

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

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

try this:

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

-55px aligns your picture to the real center, it's the half of image's height.
It works for me in Chrome and Firefox. http://jsfiddle.net/b24UH/

回复收藏 0 原文

深海里的那抹蓝 2025-01-13 08:03:43

像这样写：

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/

适用于所有浏览器

Write like this:

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

UPDATED

write like this:

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

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

It's work in all browsers

回复收藏 0 原文

~没有更多了~