使div里的img垂直居中,为什么要在img标签的前面插入一对空标签

发布网友发布时间：2022-04-19 04:52

共2个回答

热心网友时间：2022-04-19 06:22

从 css 里，只看到设置行高为 55px，并没有看到垂直居中代码。

你上面所称加空行就居中，据个人理解，应该是整个 DIV 的宽度刚好被两个元素（空行和图片）填满了，看起来是居中了。

从第1个图与第2个图的比较，比较明显：加了个空行后，下面的图片等于向下移动了位置，刚好使得图片到了中间的位置。追问是应该占了他的位置吗？我把放在后面,
也是居中效果。
我曾设置了 line-height: 55px;然后
.music-mv{
vertical-align:middle;
} 都没有居中效果，在审查元素里看整个div的没看见显示行高为55px, 显示的是图片的高度24px.
加上了后就显示出行高为55px. 这一点让我不知道是为什么

追答

据有关资料：line-height 只对文字起作用，对于图片时失效。根据CSS手册，line-height 行高指的是文本行的基线间的距离。

以下是 DIV 中 IMG 居中（水平+垂直）的示例，供参考：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.ss
{
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px;
*font-family:Arial;
width:200px;
height:200px;
border: 1px solid #c9c9c9;
}

.ss img
{
vertical-align:middle;
}
</style>
</head>
<body>
<div class="ss"><img src="tttt.png"></div>
</body>
</html>

运行效果图：

顺便提一句，依照你的代码，没看到居中的效果。

热心网友时间：2022-04-19 07:40

那个span标签相当于就是个占位符了，把上面的空间给抢了，图片就只能往下移了，所以就实现了居中效果追问但是我把放在后面，像这样

也是居中效果。

追答刚刚做了实验，发现我用你的方法是无法达到居中效果的，所以你的是什么情况我也不是很清楚了。不过我个人是习惯是只要能达到目的就是OK的，其他的也不会怎么多想了。好好做吧