父元素如果加了border,子元素即使line-height和父元素的height相同也无法居中显示

新手上路,请多包涵

子元素h1的line-height与父元素div的height相同,但是因为父元素设置了border,所以h1无法完全覆盖且垂直居中显示在父元素上;

clipboard.png

clipboard.png

可以看到h1已经溢出到后面的div上了
clipboard.png

奇怪的是,删除掉h1的行高之后,标题反而能够垂直居中,请问怎么会发生这种情况;

clipboard.png

clipboard.png

如果在同时需要保留子元素行高和父元素边框的情况下,怎么解决子元素无法完全覆盖在父元素上面并且垂直居中的问题?新手自学,有哪位大大指点一二.

阅读 4.8k
2 个回答

有这么几点

  1. 你没有进行css reset导致h1标签上有margin,以致于h1高度上超出太多
  2. div上有border,并且box-sizing: border-box,所以计算后h1的line-height: 36px
  3. 至于为何删掉line-height后正好居中显示呢,下图是chrome下h1的默认样式,当font-size: 14px时,其h1元素的总高正好是36不到一点。。

clipboard.png

clipboard.png

你没有css重置,h1有外边距

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题