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