助教求助line－height问题

.banner>.wrap{
    width: 80%;
    margin: 0 auto;
    height: 100%;
    line-height: 200px;
}


.banner>.wrap>p{
    width: 100%;
    text-align: center;
    font-size:10px;
    line-height: 10px;
}
助教求解啊，我发现最外面的line－height起不到作用
只有p标签的line－height起到作用，同时我还把p的display改为 inline－block，有效了，外面里面都可以
试想，是不是line－height 对block的元素有覆盖或者其它作用求解求解

慕数据6821453 2017-02-14

源自：HTML5展望 3-1 课程总结

收起

6回答

小丸子爱吃菜回答被采纳获得+3积分 2017-02-14 14:00:16

明白你的问题了，你想设置p标签的文字在banner图片上处置居中显示，处理这个问题，我们建议使用绝对定位将文字定位在图片上，然后通过设置left和top值以及margin值来实现居中~

将块级元素转换为行内元素，因为你外边包裹的是块级元素，所以块级元素会依照自己设定的高度去撑开，再给行内块元素设置行高，就会实现居中显示；但如果元素是块级元素，他会撑开父级元素的盒子，如果你给元素的盒子设置的自己的行高，那么他就会使用自己的行高，父元素盒子的高度就是它自己的高度。

所以还是建议你是用定位属性来写，会比较易懂，且好处理！

祝学习愉快！

收起回答

慕数据6821453 提问者 #1

!!!!!!哇塞！！！助教你好厉害！！！！但是我不敢用绝对定位啊用了绝对定位我怕的是适配问题如果写成 top:50%，会以p的上边为基准点（所以不是居中会比居中矮半个元素的宽度），如果写具体数值的话我怕换了电脑就没办法适配＝＝所以头痛，助教可以方便讲解下怎么用绝对定位来解决吗？？！太麻烦啦！！

2017-02-14 14:05:24
小丸子爱吃菜回复提问者慕数据6821453 #2

如果使用定位，那么根据他的父元素进行定位，这样不管是什么样的显示器，不会出现你说的那个问题~如果你真的不喜欢用定位，那就可以考虑用你那个方法来写，总之可以实现就行~

2017-02-14 14:20:15
慕数据6821453 提问者回复小丸子爱吃菜 #3

好的好的谢谢你啦哇！！！情人节快乐～嘿嘿～情人节都不放假了啊～造反造反

2017-02-14 14:22:42

点开查看后面1条评论

提问者慕数据6821453 2017-02-14 12:07:35

助教你能理解我在说什么吗？我表达能力不怎么好！

收起回答

小丸子爱吃菜 2017-02-14 11:48:07

你不用注释，就写一个小的页面，类似这样的，不用太复杂，就直接点明这个问题就行

收起回答

提问者慕数据6821453 #1

助教助教～我带图上代码了麻烦你帮我看一下。。谢谢！！！

2017-02-14 12:08:14
提问者慕数据6821453 #2

助教你看到了吗～看到了告诉我一声我怕你没收到！！谢谢

2017-02-14 13:25:25

小丸子爱吃菜 2017-02-14 11:39:23

你说的这个效果我想象不出来呀，这样吧，你写个简单的demo，然后发过来我看一下代码和效果！可否？

收起回答

提问者慕数据6821453 #1

好的好的怎么发给你我把二种情况注释一下

2017-02-14 11:45:04

小丸子爱吃菜 2017-02-14 11:34:26

要使用line-height，line-height的值要和height的值保持一致，才能实现垂直方向居中的效果~

收起回答

提问者慕数据6821453 #1

助教助教，我知道line-height和height的值一样的时候会居中但是如果我内部是p元素的外面的line-height会无效的但是如果我是inline block的话就可以。我想知道为什么

2017-02-14 11:36:51

提问者慕数据6821453 2017-02-14 09:04:14

图片已经附上，简单的说一下外面的一层div.class = "wrap" 然后里面包裹了一个换行的 p标签，
这道题是要p标签居中显示，左右没有问题，问题出在垂直，好了那么问题来了：最开始我在用p
的时候我知道p 为block 但是试了很下发现p 外面的一层（.wrap）的line－height失效了，只会采用
p自己的line-height如果不写的话会直接继承过来所以还是只有p标签的行高发生改变，外面一层的行高失效了，
最后我把p改成inline－block 里外的line－height都有效果。我就想知道为什么block元素的时候就不可以？

收起回答