vertical-align什么时候用并且有效

用vertical-align:middle。然而用的时候总是无效。这个原因很细节

作用环境：父元素设置line-height。

作用对象：子元素中的inline-block和inline元素。

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

vertical-align 属性可被用于两种环境：

  • 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片
  • 垂直对齐表格单元内容。

一、父元素设置 line-height

  • 父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。

  • vertical-align不可继承，必须对子元素单独设置。

在父元素定义了line-height的条件下，vertical-align的作用是让（inline/inline-block）子元素依据父元素的基点对齐。

值 描述
长度 通过距离升高（正值）或降低（负值）元素。’0cm’等同于’baseline’
百分值 – % 通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。’0%’等同于’baseline’
baseline 默认。元素的基线与父元素的基线对齐。
sub 降低元素的基线到父元素合适的下标位置。
super 升高元素的基线到父元素合适的上标位置。
top 把对齐的子元素的顶端与line box顶端对齐。
text-top 把元素的顶端与父元素内容区域的顶端对齐。
middle 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
bottom 把对齐的子元素的底端与line box底端对齐。
text-bottom 把元素的底端与父元素内容区域的底端对齐。
inherit 采用父元素相关属性的相同的指定值。

关于作用环境

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。
所谓inline-block水平的元素，即可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
对inline元素设置vertical-align是有作用的，只是要重新设置line-height的值，否则继承了父元素的line-height只能垂直居中。

二、当父元素没有设置line-height时，inline/inline-block子元素之间对齐。

  • 当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，无法子元素居中对齐父元素。
  • 设置了vertical-align:middle的子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项，则居中对齐。

只设文字的vertical-align，则文字的中线对齐图片底线

img

只设图片的vertical-align，则图片的中线与文字的基线对齐

img

两个的vertical-align都为middle，则两个的中线互相对齐

img

三、总结

vertical-align是CSS中用于控制行内元素在垂直方向上对齐的属性。它在以下两种情况下非常有用：

  1. 行内元素对齐： 当你有一行包含多个行内元素（例如文本或图片），并且想要控制它们在垂直方向上的对齐方式时，vertical-align属性就派上用场了。这在创建按钮、菜单、导航链接等元素时很常见。通常，该属性的值应用于行内元素本身，而不是它们的容器。

    例如，假设你有一个导航菜单，每个菜单项都是一个链接，现在你希望所有的菜单项在垂直方向上都居中对齐，可以使用以下CSS样式：

    1
    2
    3
    4
    cssCopy code.menu-item {
      display: inline-block;
      vertical-align: middle;
    }

  2. 表格单元格中的内容对齐： 在HTML表格中，vertical-align属性非常有用，因为它允许你控制表格单元格中内容的垂直对齐方式。这在确保表格内容整齐和美观的显示时非常重要。

    例如，假设你有一个HTML表格，其中包含了多行多列的数据，你希望所有单元格中的内容都在垂直方向上居中对齐，可以使用以下CSS样式：

    1
    2
    3
    cssCopy codetd {
      vertical-align: middle;
    }

需要注意的是，vertical-align属性并不适用于块级元素（display: block），因为块级元素本身就是一种独立的块，没有类似于行内元素的行高等概念。所以，这个属性主要用于行内元素的对齐。

此外，需要特别注意的是vertical-align属性有一些特殊的行为和值，比如baseline值会基于元素的文本基线来对齐，而不是基于元素的内容或者高度。这些细节需要在使用时进行更深入的了解。