CSS：您可以将图例放置在左边框居中的字段集中吗？答案

【问题标题】：CSS: Can You positiion a legend inside a fieldset on the left border centered?CSS：您可以将图例放置在左边框居中的字段集中吗？
【发布时间】：2016-12-30 12:37:18
【问题描述】：

我正在尝试获取图例并将其附加到左边框。我想垂直居中显示它。这可能吗？请参阅下面的示例

左边框应如下所示：

__________________________________
|
|
|
Some Text here
|
|
|
|__________________________________

【问题讨论】：

标签： css sass less

【解决方案1】：

您可以绝对定位图例，然后使用过渡稍微修正。 CSS 看起来像这样（左侧填充添加到字段集中，因此内容不会与图例重叠）：

CSS

fieldset {
  position: relative;
  padding-left: 50px;
}

legend {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
    <div>
         <label for="name">Text Input:</label>
         <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
  </fieldset>
</form>

【讨论】：

您应该注意，这将失去legend 的默认样式，因此边框“中断”不会像通常那样发生 - jsfiddle.net/gLxf3jvm 这可能是 OP 应该考虑的问题。