如何使用 HTML 和 CSS 在边框中间实现标题

Question

我有一个网格布局：

#price {

  display: grid;

  grid-template-columns: auto repeat(3, 1fr) auto;

  grid-template-rows: auto 1fr;

  grid-gap: 3vw;

}

并且似乎找不到一种方法来制作一个响应式标题，例如下面包含“lorem”的元素。

Answer 1

为了实现这样的功能，我建议您检查 HTML 字段集和图例。 如文档中指定该元素为 HTML 表单的一部分提供分组， 带有为.<fieldset><legend><fieldset>然后，您可以设置 和 的样式来获得预期的结果。fieldsetlegendCSS

Answer 2

HTML中心很笨拙，但不是我展示的......表明字段集和图例可能是这里最好的用途。&nbsp; &nbsp; <fieldset>&nbsp; &nbsp; <legend>monster</legend>&nbsp; &nbsp; <center>&nbsp; &nbsp; &nbsp; <h2>Lorem ipsum</h2>&nbsp; &nbsp; </center>&nbsp; </fieldset>fieldset{&nbsp; &nbsp; border: 1px solid #74D5EB;&nbsp; &nbsp; font-weight: bold;}legend {&nbsp; &nbsp; border: 1px solid #74D5EB;&nbsp; &nbsp; padding: 3px 6px;&nbsp; &nbsp; margin:auto;&nbsp; &nbsp; border-radius: 15px;}