如何在`fieldset legend`的中间位置设置文本

Posted 2023-02-16

【中文标题】如何在`fieldset legend`的中间位置设置文本

【英文标题】：How to set Text at middle position in `fieldset legend `

【发布时间】：2012-12-10 16:40:21

【问题描述】：

如何在field set的边框中间设置图例文字？

我试过这个html代码：

<fieldset>
    <legend align="center"> 
              This is text appear at center of border
    </legend>
</fieldset>

我也尝试过使用margin-left: 100px，但由于设计限制，我不想使用margin-left。

【问题讨论】：

它在Fiddle工作

它以两种方式工作：fiddle.

【参考方案1】：

CSS是你的朋友

legend 
    width: 100%;
    text-align: center;

【讨论】：

很容易你可以给它添加边框。将您现有的 css 粘贴到您的问题中

在legend或fieldset添加边框的位置

如果您为字段集添加边框，它将围绕包含您随后的字段的所有区域设置边框。如果您仅将边框添加到图例，那么它将如预期的那样仅将边框添加到您的图例区域

【参考方案2】：

尝试给“图例元素”一个宽度，百分比为 10%。 然后给它 margin-left:45% ((100-10)/2)

legend 
width: 10%;
text-align: center;
margin-left:45%;

它将在边界之间的中心