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

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和Opera中它是.在Mozilla中,图例标记位于字段集边框与其内容之间,在IE和Opera中,它位于内容中.这使得很难在字段集边框内移动图例,或者将它放置在字段集左侧,因为跨浏览器会产生不同的效果

您可以阅读更多关于他在Fancy Form Design中使用CSS说明如何设置表单样式的内容.

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

（接听者然后将键盘扔到地板上，就像麦克风一样）