demo在这,http://codepen.io/anon/pen/LVgqdo
使用line-height让子类的inline-block元素剧中,但是好像就是差那么一点?
文字不知怎的没有在div2中?
div2
继承了div1
的line-height
,即100px. 想让文字在div2
中垂直居中,应该如下设置:
.div2{
display:inline-block;
width:40px;
height:40px;
line-height: 40px; // 添加这一行
background:red;
vertical-align:middle;
}
css
.div1{ width:100px; height:100px; background-color:yellow; line-height:100px; vertical-align:middle; font-size:0; } .div2{ display:inline-block; width:40px; height:40px; line-height: 40px; background:red; vertical-align:middle; font-size:14px; }
inline元素空白符产生的问题,粗暴的解决办法就是父级设置font-size:0
,子元素字体大小再恢复设置即可。
当然,你也可以把div1和div2写在同一行,这样就没问题了。
至于div2的文字为啥跑走了,因为你行高设置了100px啊,100px啊,被子元素继承了啊!!!