前端学习笔记（8）之利用vertical-align：middle；实现元素上下左右居中

关于元素类型和vertical-align

• • 关于设置display：none的元素
  • 设置inline-block的效果
  • 置换元素与非置换元素
  • vertical-align 实现元素居中

关于设置display：none的元素

添加display：none声明的元素，在dom tree 和 render tree的区别：
在dom层，display：none的元素是在dom tree结构里面（加载的）
在render层：display：none的元素是不在 render tree。

设置inline-block的效果

inline-block 行内块元素（内联块元素）：
1：能设置宽高
2：在一行内排列
3：如果两个元素之间有回车，两个元素在浏览器上是有间距的

置换元素与非置换元素

• 置换元素：
  根据标签的类型、或者是标签的属性，来更改当前标签在页面中的显示状态。input img textarea select元素都是置换元素。
  置换元素在浏览器显示的过程中生成一个框，这个框可以设置宽度高度。
• 非置换元素：
  不是置换元素的都是非置换元素。

vertical-align 实现元素居中

 vertical-align的属性值:topmiddlebottombaseline给父元素添加text-align:可以使文本、所有的内联元素 左右居中

  

"box">

关键操作：

①要让h2元素在容器内上下左右居中，在h2旁边无间隔放一个空span。
②给空span设置inline-block使其变成行内块元素，可为其设置宽0高100%，
再vertical-align：middle；此时，参照物四步设置完成。
③有参照物的情况下，h2元素设置vertical-align：middle使其上下居中，再给h2设置inline-block，从而其父元素box可以设置text-align-center使h2水平居中。

vertical-align：middle；的本质是所有元素的height取中值那条线在垂直方向上对齐。
空span的height是盒子高度，中值就是盒子中间，因此可作为参照物。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！