将图例放在HTML5的底部

Question

以前，legend标签具有align属性，其值为top，bottom，left和right。但是在HTML 5中，不再支持此属性。 W3schools advises to use css代替。

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

编辑：只是为了澄清：我并不是说HTML 5不支持legend标记，但是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>