子元素h1的line-height与父元素div的height相同,但是因为父元素设置了border,所以h1无法完全覆盖且垂直居中显示在父元素上;
可以看到h1已经溢出到后面的div上了
奇怪的是,删除掉h1的行高之后,标题反而能够垂直居中,请问怎么会发生这种情况;
如果在同时需要保留子元素行高和父元素边框的情况下,怎么解决子元素无法完全覆盖在父元素上面并且垂直居中的问题?新手自学,有哪位大大指点一二.
子元素h1的line-height与父元素div的height相同,但是因为父元素设置了border,所以h1无法完全覆盖且垂直居中显示在父元素上;
可以看到h1已经溢出到后面的div上了
奇怪的是,删除掉h1的行高之后,标题反而能够垂直居中,请问怎么会发生这种情况;
如果在同时需要保留子元素行高和父元素边框的情况下,怎么解决子元素无法完全覆盖在父元素上面并且垂直居中的问题?新手自学,有哪位大大指点一二.
3 回答5.2k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.5k 阅读
3 回答2.1k 阅读
2 回答1k 阅读✓ 已解决
有这么几点
box-sizing: border-box
,所以计算后h1的line-height: 36px
line-height
后正好居中显示呢,下图是chrome下h1的默认样式,当font-size: 14px
时,其h1元素的总高正好是36不到一点。。