使div里的img垂直居中,为什么要在img标签的前面插入一对空标签
html代码：<divclass="music-mv"><span></span><imgsrc="../images/mv.png"></div>css里设置了.mus...
html代码：
<div class="music-mv" >
<span> </span>
<img src="../images/mv.png">
</div>
css 里设置了
.music-mv{
line-height: 55px;
}
图片本身高度为24px
不加 <span> </span> 图片是这样的
加上之后就垂直居中了
这是为什么？求解释！
我把<span> </span>放在后面，像这样
<div class="music-mv" >
<img src="../images/mv.png">
<span> </span>
</div>
也是居中效果。 展开
<div class="music-mv" >
<span> </span>
<img src="../images/mv.png">
</div>
css 里设置了
.music-mv{
line-height: 55px;
}
图片本身高度为24px
不加 <span> </span> 图片是这样的
加上之后就垂直居中了
这是为什么？求解释！
我把<span> </span>放在后面，像这样
<div class="music-mv" >
<img src="../images/mv.png">
<span> </span>
</div>
也是居中效果。 展开
2个回答
展开全部
从 css 里，只看到设置 行高为 55px，并没有看到垂直居中代码。
你上面所称加 空行 就居中，据个人理解，应该是整个 DIV 的宽度刚好被两个元素（空行和图片）填满了，看起来是居中了。
从第1个图与第2个图的比较，比较明显：加了个空行后，下面的图片等于向下移动了位置，刚好使得图片到了中间的位置。
你上面所称加 空行 就居中，据个人理解，应该是整个 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>
运行效果图：
顺便提一句，依照你的代码，没看到居中的效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
