CSS里，我在DIV里放了个<img>和<p>标签，为什么父元素DIV用了line-height:都不会垂直居中呢？
还有<p>标签用了display:inLine-block;为什么不直接贴着父元素DIV，而是向下动了一点，而且P标签用Margin-top也没有作用，根本不会动<!DO...
还有<p>标签用了display:inLine-block;为什么不直接贴着父元素DIV，而是向下动了一点，而且P标签用Margin-top也没有作用，根本不会动<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>垂直对齐</title><style>*{ padding:0; }#nav {width:400px;height:200px; background-color: red;margin:0 auto; lineheight:200px;}#nav img{margin-top:-10px; } #nav p { display: inline-block;margin-top:-20px;}</style></head><body><div id="nav"><img src="楼宇对讲/img/seach.png" alt="seachlogo"/><p>这是一段文字</p></div></body></html>
展开
3个回答
展开全部
是因为在同一行有一个大图片，把文字跟“撑”下去了。要让图片元素和p元素同时垂直居中才可以。
帮你做了一个案例。代码如下：
HTML：
<div>
<img src="Felix.jpg"><p>这是测试文字</p>
</div>
默认情况下效果：
给img,p加垂直居中后的效果：
增加的CSS代码：
img, p{
vertical-align: middle;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
谁说line-height就是垂直居中呢？这只是行高而已
追问
一般不是用Line-height就可以将父元素内的元素垂直居中吗？
追答
不是 ，行高是行高，两者不要混淆，因为你放了图片了，显示不了想要的效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
行高是对单行文本才起作用，img不是单行文本，如果你弄p，a这些单行的就you效果了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
