html - 如何使 元素居中 - 使用什么代替对齐 :center attribute?

Question

我在这里错过了什么？

编辑，因为这在评论中不起作用:

以下解决方案的结果是:

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

但我要做的是:

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

编辑#2:

根据目前的反馈，这听起来像是整个<legend> tag 是一个失败的命题。有没有人有他们使用什么来代替这个的例子——具有相似外观的更可靠的东西？

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 中最困难的事情。卡梅隆亚当斯说得最好

Probably the only difficulty in styling semantic forms is the legend tag. It is insufferably variable across browsers. In Mozilla, the legend tag is not left-indented from the body of the fieldset, in IE and Opera it is. In Mozilla, the legend tag is positioned in between the fieldset's border and its content, in IE and Opera it is positioned inside the content. This makes it very hard to move the legend inside the fieldset border, or position it flush to the left of the fieldset, as you get varying effects across browsers

您可以在 Fancy Form Design Using CSS 阅读更多关于他所说的内容关于如何设置表单样式。

我对该问题的解决方案是完全删除字段集边框并绝对定位图例元素。您想要做的事情的问题是它在每个浏览器中都不同。