Question

我在这里缺少什么？

修改，因为这在评论中不起作用：

以下解决方案导致：

----------------------------------------------------
|                                                  |
|                     Legend text                  |

但我想要的是：

----------------------Legend text-------------------
|                                                  |
|                                                  |

编辑＃2：

根据到目前为止的反馈，听起来这整个<legend>标签是一个失败的主张。有没有人有他们用什么代替这个的例子 - 具有类似外观的东西更可靠？

Answer 1

假设您的标记与此类似：

<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，传说标签位于之间 fieldset的边框及其内容，in IE和Opera它位于里面内容。这使得它非常困难在区域集内移动图例边界，或将它与它齐平你得到的字段集的左边不同浏览器的影响

您可以详细了解他在Fancy Form Design Using CSS所说的关于如何设置表单样式的内容。

我对此问题的解决方案是完全删除fieldset边框并绝对定位图例元素。您想要做的问题是每个浏览器都有所不同。

Answer 2

图例可以很容易地通过html属性设置样式。我通过搜索找到了..

<legend align="center">Legend</legend>

Answer 3

众所周知，传说对造型有抵抗力。

您可以做的一件事是使用标题元素而不是图例，因为它更容易设置样式。这至少可以满足您在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>

Answer 4

终于在没有align="center"黑客的情况下得到了它。仅使用合法的css边距

legend{
    width: 70px;
    padding: 2px;
    margin-left: calc(50% - 35px - 2px);
}

Answer 5

legend
{
    margin-left: calc(50%);
    transform: translateX(-50%);
}

（然后，回答者将键盘放在地板上，就像麦克风一样）

Answer 6

以下是我几分钟前的情况。这适用于Firefox和Chromium / Opera。 Haven没有在Edge和早期IE-crap中测试过，但根据我的经验，也应该在那里工作。

假设里面的表单元素显示为块。

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: 0 34.6%; 现在，如果您增加或减少左/右或宽度的填充，您显然需要重新计算图例的左/右边距的百分比。不要为 0 auto 而烦恼。它根本不会起作用。

Answer 7

您还可以使用非常基本的rails form helper将任何semantic_form_for输出复制为HTML。既然您知道自己的期望，就可以在不使用semantic_form_for的情况下将其写出来。我们正在其中一个项目中这样做。

Answer 8

为此抛出替代品的时间已经很晚了？无论如何，我想使用一个字段集，发现浏览器缺乏定位和浏览器烦人的变量显示所以我复制了几个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宽度，并且左边距必须设置为一半。您可能需要根据文本的长度调整宽度。左边：50％在父母的中间点开始，剩下的负边距将其置于自己宽度的一半。

Answer 9

试试这段代码： -

<legend style="text-align:center;"> LEGEND TITLE </legend>

上面的代码只包含字段集的图例组件，它通过内联CSS将图例居中。同样可以通过外部CSS或使用“样式”标签来完成。

Answer 10

您可以像

一样使用它

<legend align="center"> your text here </legend>

Answer 11

使用“ 左边距”作为图例将文本向右移动。

  <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>

如何使<legend>元素居中 - 使用什么而不是align：center属性？</legend>

11 个答案: