表格单元格中的vertical-align

Question

我被告知vertical-align仅适用于内联和表格元素，但是，今天我在块元素上使用vertical-align，它工作正常吗？怎么可能？在这种情况下，垂直对齐是否适用于所有元素类型？或者如果没有，它的作用是什么？

＆＃13;

#wrap {
border: 1px solid black;
width: 500px;
height: 500px;
}
#alignTop {
vertical-align: top;
border: 1px solid black;
}

＆＃13;

<div id = 'wrap'>
<div id = 'alignTop'> alignTop </div>
</div>

＆＃13;

Answer 1

默认情况下block元素堆叠在一起，所以 DOESN＆＃39; T 工作。

请参阅W3C

在块格式化上下文中，框一个接一个地布局，垂直，从包含块的顶部开始。垂直的两个兄弟框之间的距离由“边距”确定。属性。 a中相邻块级框之间的垂直边距阻止格式化上下文崩溃。

您可以在W3C上看到vertical-align在block元素中无效，仅适用于inline-level和table-cell

Value:    baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:      baseline
Applies to:   inline-level and 'table-cell' elements
Inherited:    no
Percentages:      refer to the 'line-height' of the element itself
Media:    visual
Computed value:   for <percentage> and <length> the absolute length, otherwise as specified

段

＆＃13;

#wrap {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#alignTop {
  vertical-align: top;
  border: 1px solid black;
}
#alignMiddle {
  vertical-align: middle;
  border: 1px solid black;
}
#alignBottom {
  vertical-align: bottom;
  border: 1px solid black;
}

＆＃13;

<div id='wrap'>
  <div id='alignBottom'>alignBottom</div>
  <div id='alignTop'>alignTop</div>
  <div id='alignMiddle'>alignMiddle</div>
</div>

＆＃13;

Answer 2

根据This链接中记录的解释：

HTML布局传统上不是为了指定垂直行为而设计的。就其本质而言，它在宽度方向上缩放，并且内容根据可用宽度流向适当的高度。传统上，水平尺寸和布局很容易;垂直尺寸和布局源于此。

vertical-align用于指定两种完全不同的行为，具体取决于使用位置

表格单元格中的vertical-align

在表格单元格中使用时，vertical-align执行大多数人期望的操作，它模仿（旧的，已弃用的）valign属性。在符合标准的现代浏览器中，以下三个代码段执行相同的操作：

<td valign="middle">  </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

内联元素的垂直对齐

当vertical-align应用于内嵌元素时，它是一个全新的球赛。在这种情况下，它的行为类似于（旧的，已弃用的）align属性在<img>元素上执行的操作。在符合标准的现代浏览器中，以下三个代码段执行相同的操作：

<img align="middle" ...>
<img style="vertical-align:middle" ...>
<span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>

垂直对齐适用于块元素

2 个答案:

段

表格单元格中的vertical-align

内联元素的垂直对齐