如何使用 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中心很笨拙，但不是我展示的......

表明

字段集和图例可能是这里最好的用途。

    <fieldset>

    <legend>monster</legend>

    <center>

      <h2>Lorem ipsum</h2>

    </center>

  </fieldset>

fieldset{

    border: 1px solid #74D5EB;

    font-weight: bold;

}

legend {

    border: 1px solid #74D5EB;

    padding: 3px 6px;

    margin:auto;

    border-radius: 15px;

}