CSS-深入理解vertical-align（一文彻底搞懂）

Rsquo
398 阅读6分钟

一、 从一些问题说起

1.1 一个 div 没有设置高度时会有高度吗？

  • 没有内容，就没有高度

  • 有内容就会有高度

1.2 内容为什么能撑起来高度呢？

  • 内容有行高（line-height），撑起了 div 的高度

    • 一段文本
    .box {
  background-color: orange;
}

<div class="box">
    虽然说，现在想吃什么用什么海外产品，都能代购，但是自己去购买，感觉还是不同。
    一个人在路上，心情也会不同，路上的行程，可以听书看书，到达后，疯狂的游玩。书的种类很多，旅行的书本真的不少，常常看到人们去各地游玩，自己心中也跟着想去。有时间，可以试着一个人去旅行，那是一种享受一种幸福。女人不必限制于单身生活，才会各地旅行，婚后的女性，有时间，也可以一个人去旅行，那是一种不同的感受，有些人也可以带小孩老公一起去旅行。独自游玩是一种幸福，家庭一起去旅行，也是一种幸福。单身的女性，可以一个人独游。婚后的女性，也可以一个人独游。当然，婚后若是自己一个人不方便，那就全家人旅行。
</div>

    • 4个行高撑起了 div 的高度 image.png

    • 增加一个行内块级（设置宽高）

    .box {
  background-color: orange;
}

.small {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

<div class="box">
    我是div元素 <span class="small"></span>
    虽然说，现在想吃什么用什么海外产品，都能代购，但是自己去购买，感觉还是不同。
    一个人在路上，心情也会不同，路上的行程，可以听书看书，到达后，疯狂的游玩。书的种类很多，旅行的书本真的不少，常常看到人们去各地游玩，自己心中也跟着想去。有时间，可以试着一个人去旅行，那是一种享受一种幸福。女人不必限制于单身生活，才会各地旅行，婚后的女性，有时间，也可以一个人去旅行，那是一种不同的感受，有些人也可以带小孩老公一起去旅行。独自游玩是一种幸福，家庭一起去旅行，也是一种幸福。单身的女性，可以一个人独游。婚后的女性，也可以一个人独游。当然，婚后若是自己一个人不方便，那就全家人旅行。
</div>

    image.png

  • 行盒的概念

    • 将当前行里面所有的内容全部包裹在一起

  • 行盒的理解

    • 只有一行文字，div 的高度为一个行盒（包含所有文本） 撑起来的高度
    .box {
  background-color: orange;
}

<div class="box">
    我是普通的文本, 323fdafdafxxxx322
</div>

    image.png

    • 加一个 img，div 的高度为一个行盒（包含文本和图片的高度） 撑起来的高度
    .box {
  background-color: orange;
}

.box img {
  width: 200px;
}

<div class="box">
    我是普通的文本, 323fdafdafxxxx322
    <img src="../images/kobe.jpg" alt="">
</div>

    image.png

    • 加一个 inline-block（设置宽高），div 的高度为一个行盒（包含文本、图片、inline-block的高度） 撑起来的高度
    .box {
  background-color: orange;
}

.box img {
  width: 200px;
}

.box .small {
  display: inline-block;
  width: 100px;
  height: 200px;
  background-color: #f00;
}

<div class="box">
    我是普通的文本, 323fdafdafxxxx322
    <img src="../images/kobe.jpg" alt="">
    <span class="small"></span>
</div>

    image.png

    • 若有多个行盒，则多个行盒撑起div的高度

1.3 行高为什么能够撑起 div 的高度呢？

  • 因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level

  • 其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level

二. vertical-align

2.1 官方解释

This property affets the vertical positing inside a line box of the boxes generated by an inline-level element. （这个属性会影响 行内块级元素 在一个 行盒 中垂直方向的位置）

2.2 多种情况

  • 只有文字时，line boxes如何包裹内容？

image.png

  • 有图片，有文字时，line-boxes如何包裹内容？

image.png

  • 有图片，有文字，有inline-block（比图片要大）如何包裹内容？

image.png

  • 有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom，如何包裹内容？

image.png

  • 有图片、文字、inline-block（比图片要大）而且设置了margin-bottom并且有文字，如何包裹内容？

image.png

上面现象出现的原因

  • line-boxes（行盒）一定会想办法包裹住当前行中所有的内容。
  • 对齐方式千奇百怪则是因为 vertical-align 默认是以 baseline 对齐

2.3 baseline 的理解

  • 文本的baseline是字母 x 的下方

  • Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）

  • Inline-block有文本时，baseline是最后一行文本的x的下方

image.png

image.png

  • 去除块级元素中图片下面空隙的方法：

    • 改变vertical-align的对齐方式，设置成 top/middle/bottom ，但是会影响块级元素内文本对齐方式
    • 将img设置为block，就不会收到vertical-align的影响
    .box img {
  display: block;
  /* vertical-align: bottom; */
}
  • 给行内级元素设置
  • middle
    • 基线+x高度的一半

2.4 vertical-align 其他值

vertical-align 是给行内级元素来设置的

  • baseline(默认值)：基线对齐

  • top：把行内级盒子的顶部跟line boxes（多个行盒）顶部对齐

    .box {
  background-color: orange;
}

.box img {
  width: 200px;
  vertical-align: top;
}

.box .small {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: #f00;
  margin-bottom: 20px;
}

<div class="box">
    普通的文本xxxx
    <img src="../images/kobe.png" alt="">
    <span class="small">xxxxx</span>
    xxxxxx
</div>

    image.png

  • middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐

    • 图片和文本
    .box {
  background-color: orange;

  height: 300px;
}

.box img {
  width: 200px;
  /* 在当前的行盒中,  */
  vertical-align: middle;
}

<div class="box">
我是普通文本gggggxxxxxx
<img src="../images/kobe01.jpg" alt="">
</div>

    image.png

    • 给父盒子设置 line-height 等于父盒子的高度，能 “居中” 吗？
    .box {
  background-color: orange;

  height: 300px;
  /* line-height: 设置一行文本的高度(一个行盒的高度) */
  line-height: 300px;
}

.box img {
  width: 200px;
  /* 在当前的行盒中 */
  vertical-align: middle;
}
    • 由于文字会下沉，会导致middle的对齐方式并非真正意义上的中线，所以并不是真正意义上的居中，图片上方距离会稍微大于图片下方

    image.png

  • bottom：把行内级盒子的底部跟line box底部对齐

  • <percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样

  • <length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样

2.5 行内块级元素其他现象

  • 行内块级元素本身的文本居中（line-height=height，文本一定居中）

    .small {
  display: inline-block;
  background-color: #f00;
  height: 80px;
  line-height: 80px;
  color: #fff;
}

<span class="small">xxxxxx哈哈哈哈</span>

    文本居中.png

  • 行内块级元素

    • 此时small盒子是居中的

      • box中的文本是垂直居中的
      • box中字体与small中字体大小是一样的，这样vertical-align的baseline对齐，会让small盒子也居中
    .box {
  height: 300px;
  line-height: 300px;
  background-color: orange;
}

.box .small {
  display: inline-block;
  background-color: #f00;
  height: 80px;
  line-height: 80px;
}

<div class="box">
  我是文本, 哈哈哈, xxxxx
  <span class="small">xxxxxx哈哈哈哈</span>
</div>

    image.png

    • 使small盒子中的字体变大，vertical-align基线对齐，small盒子就不能垂直方向上居中了
    .box {
  height: 300px;
  line-height: 300px;
  background-color: orange;
}

.box .small {
  display: inline-block;
  background-color: #f00;
  height: 80px;
  line-height: 80px;
  font-size: 40px
}

    字体变大.png

    • 不给small盒子设置行高，则会继承父盒子的行高
    .box {
  height: 300px;
  line-height: 300px;
  background-color: orange;
}

.box .small {
  display: inline-block;
  background-color: #f00;
  height: 80px;
}

    image.png

avatar
文章
阅读
粉丝