在 HTML5 底部放置图例

Question

此前legend标签都有效有一个align与值属性top，bottom，left和right。但在 HTML 5 中不再支持此属性。W3schools建议改用 css。

但是如何使用 css 将图例定位到字段集的底部，使其看起来像这样：

编辑：只是为了澄清：我并不是说legendHTML 5 不支持该标签，但该align属性不再存在。我想将图例放在字段集的底部。

Answer 1

您需要手动定位legend.

fieldset {
  width: 200px;
  height: 50px;
  position: relative;
  top: 50px;
  left: 50px;
  box-sizing: border-box;
  border: solid black 1px;
}

legend {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  padding: 0 5px;
  background: white;
}

<fieldset>
    <legend>Legend</legend>
    Content goes here.
</fieldset>