我在这里错过了什么？
编辑，因为这在评论中不起作用：
以下解决方案导致：
----------------------------------------------------
| |
| Legend text |
但我想要的是：
----------------------Legend text-------------------
| |
| |
编辑#2：
根据目前的反馈，听起来整个<legend> 标签是一个失败的提议。有没有人举个例子说明他们用什么来代替这个——外观相似但更可靠的东西？
【问题讨论】：
假设您的标记看起来与此类似：
<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
您的 CSS 应如下所示：
legend {
margin:0 auto;
}
这是最简单的
哦，亲爱的...当涉及到跨浏览器兼容性时，您可能选择了 CSS 中最困难的事情。卡梅伦亚当斯说得最好
可能是唯一的困难 样式化语义形式是传奇 标签。变化莫测 跨浏览器。在 Mozilla 中， 图例标签不左缩进 字段集的主体，在 IE 和 歌剧是。在 Mozilla 中，传奇 标签位于 字段集的边框及其内容，在 IE 和 Opera 它定位在里面 内容。这使得它非常困难 在字段集中移动图例 边框，或将其与 字段集的左侧，如您所见 跨浏览器的不同效果
您可以阅读更多关于他在Fancy Form Design Using CSS 上所说的关于如何设置表单样式的内容。
我对该问题的解决方案是完全删除字段集边框并绝对定位图例元素。您想要做的问题是每个浏览器都不同。
【讨论】：
图例可以很容易地通过 html 属性设置样式。我通过搜索找到了..
<legend align="center">Legend</legend>
【讨论】：
终于在没有align="center" hack 的情况下得到了它。仅使用合法的 CSS 边距
legend{
width: 70px;
padding: 2px;
margin-left: calc(50% - 35px - 2px);
}
【讨论】：
Legend 是出了名的不喜欢样式化。
您可以做的一件事是使用标题元素而不是图例，因为这样更容易设置样式。这至少可以满足您在 FF3 和 Safari 中的需求。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
h3{
background-color:#FFF;
margin: -1em auto 0;
text-align:center;
width:10%;}
</style>
</head>
<body>
<form>
<fieldset>
<h3>Person:</h3>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
【讨论】：
legend
{
margin-left: calc(50%);
transform: translateX(-50%);
}
（接听者的键盘然后像麦克风一样掉在地板上）
【讨论】：
这是我几分钟前刚来的。这适用于 Firefox 和 Chromium/Opera。尚未在 Edge 和早期的 IE 垃圾中进行测试，但根据我的经验，应该也可以在那里工作。
假设里面的表单元素显示为块。
fieldset {
border: 1px solid Olive;
padding: 0.1%;
margin: 1px auto;
width: auto;
}
legend {
font-size: 10px;
text-align: center;
padding: 0.2% 0.4%;
width: 30%;
margin: 0 34.6%;
border: 1px solid DarkOrange;
border-radius: 5px;
}
诡计在于传说 margin 和 percentages。 margin: 0 34.6%;
现在，如果您增加或减少填充左/右或宽度，您显然需要重新计算图例左/右边距的百分比。不要为 0 auto 烦恼。它根本行不通。
【讨论】：
您还可以使用非常基本的 rails 表单助手将任何语义表单输出复制为 HTML。既然你知道你的期望，你可以不用semantic_form_for 把它写出来。我们正在我们的一个项目中这样做。
【讨论】：
为此提出替代方案有点晚了？无论如何，我想使用一个字段集，发现图例缺乏定位和浏览器显示的变量很烦人，所以我复制了几个 div：
<div style="border:solid 1px #AAAAAA; position:relative; padding:10px;">
<div style="position:absolute; top:-10px; left:50%; margin-left:-35px; width:70px; text-align:center; background-color:#FFFFFF;" >Legend</div>
Stuff in your fieldset
</div>
关于此的重要说明：必须设置内部div宽度，并且必须设置左边距为一半。您可能需要根据文本的长度调整宽度。 left:50% 从父节点的中点开始，负边距 left 将其定位到自身宽度的一半。
【讨论】：
你可以像这样使用它
<legend align="center"> your text here </legend>
【讨论】：
使用“margin-left”作为图例将文本向右移动。
<fieldset>
<legend style="margin-left:3%;">Summary</legend>
<div>
The novella The Metamorphosis was written by Franz Kafka in 1912. It tells the story of the tragedy of a salesman, Gregor Samsa, who turned into a gigantic insect, but still possessed a human mind.</div>
</fieldset>
【讨论】：