Html 如何使 <legend> 元素居中 - 使用什么来代替 align:center 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4006824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center the <legend> element - what to use instead of align:center attribute?
提问by asfsadf
What am I missing here?
我在这里缺少什么？
Edit, because this doesn't work in a comment:
Edit，因为这在评论中不起作用：
The below solution results in this:
以下解决方案导致：
----------------------------------------------------
| |
| Legend text |
but what I'm going for is:
但我要的是：
----------------------Legend text-------------------
| |
| |
Edit #2:
编辑#2：
Based on the feedback so far, it is sounding like this whole <legend>tag is a losing proposition. Does anyone have an example of what they use in lieu of this--something that has a similar appearance that is more reliable?
根据迄今为止的反馈，听起来整个<legend>标签是一个失败的主张。有没有人有一个例子来说明他们使用什么来代替这个 - 具有相似外观但更可靠的东西？
回答by Tom
Assuming your markup looks something similar to this:
假设您的标记看起来与此类似：
<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>
Your CSS should look something like this:
你的 CSS 应该是这样的：
legend {
margin:0 auto;
}
that's easiest
这是最简单的
Oh Dear... You have chosen probably the most difficult thing in CSS when it comes to cross-browser compatibility. Cameron Adams said it best
哦，亲爱的...当涉及到跨浏览器兼容性时，您可能选择了 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
样式语义形式的唯一困难可能是图例标签。它在浏览器中的变化令人难以忍受。在 Mozilla 中，图例标签不是从字段集的主体中左缩进的，在 IE 和 Opera 中是。在 Mozilla 中，图例标签位于字段集的边框与其内容之间，而在 IE 和 Opera 中，它位于内容内部。这使得很难在字段集边框内移动图例，或将其放置在字段集的左侧，因为您会在浏览器中获得不同的效果
You can read more about what he said at Fancy Form Design Using CSSon how to style forms.
您可以阅读更多关于他在Fancy Form Design Using CSS 中关于如何设置表单样式的内容。
My solution to the problem would be to remove the fieldset border completely and absolutely position the legend element. The problem with what you want to do is that it is different in every browser.
我对这个问题的解决方案是完全删除字段集边框并绝对定位图例元素。您想要做什么的问题在于它在每个浏览器中都不同。
回答by Akm Sadi
The legend can be styled by html attribute quite easily. I've found by searching..
图例可以很容易地通过 html 属性设置样式。我通过搜索找到了..
<legend align="center">Legend</legend>
回答by Accountant ?
finally got it without the align="center"hack. using only legal css margins
终于在没有align="center"黑客的情况下得到了它。仅使用合法的 css 边距
legend{
width: 70px;
padding: 2px;
margin-left: calc(50% - 35px - 2px);
}
回答by Mark Chorley
Legends are notoriously resistant to styling.
传奇是出了名的抗造型。
One thing you can do is use a heading element instead of legend as that will be much easier to style. This does what you want in FF3 and Safari at least.
您可以做的一件事是使用标题元素而不是图例，因为这样更容易设计样式。这至少可以在 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>
回答by Lonnie Best
legend
{
margin-left: calc(50%);
transform: translateX(-50%);
}
(Answerer then drops his keyboard on the floor, like a microphone)
（然后回答者将他的键盘放在地板上，就像麦克风一样）
回答by Spooky
Here is with what I came just a few minutes ago. This is working in Firefox and Chromium/Opera. Haven't tested in Edge and earlier IE-crap, but according to my experience, should work there as well.
这是我几分钟前来的。这适用于 Firefox 和 Chromium/Opera。没有在 Edge 和更早的 IE-crap 中测试过，但根据我的经验，应该也可以在那里工作。
Assuming that form element inside is displayed as block.
假设里面的表单元素显示为块。
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;
}
The trickery is with legend marginand percentages. margin: 0 34.6%;Now, if You increase or decrease padding left/right or width, You'll need to recalculate percentage for legend's left/right margin, apparently. Don't bother with 0 auto. It simply won't work.
诡计在于图例边距和百分比。margin: 0 34.6%;现在，如果您增加或减少向左/向右或宽度的填充，显然您需要重新计算图例左/右边距的百分比。不要打扰0 auto。它根本行不通。
回答by kunal
You can use it like
你可以像这样使用它
<legend align="center"> your text here </legend>
回答by Victor Pudeyev
You can also replicate whatever semantic_form_for outputs as HTML, using the very basic rails form helper. Since you know what you expect, you can write it out without the use of semantic_form_for. We are doing this in one of our projects.
您还可以使用非常基本的 rails 表单助手将任何 semantic_form_for 输出复制为 HTML。既然你知道你期望什么，你可以不使用semantic_form_for 将它写出来。我们正在我们的一个项目中这样做。
回答by invertedSpear
Little late to throw out an alternative for this? Anyway, I wanted to use a fieldset and found the lack of positioning of the legend and the variable display by browser annoying so I replicated with a couple divs:
为此抛出替代方案有点晚了？无论如何，我想使用一个字段集，发现缺少图例的定位和浏览器显示的变量很烦人，所以我用几个 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>
The important notes on this: the inner div width must be set, and the margin left must be set to half. You may have to make adjustments to the width depending on the length of your text. The left:50% starts it at the halfway point of the parent and the negative margin left positions it back half it's own width.
关于这一点的重要说明：内部div宽度必须设置，并且左边距必须设置为一半。您可能需要根据文本的长度调整宽度。left:50% 从父级的中点开始，负边距 left 将其定位到它自己宽度的一半。
回答by Shilpa
Use "margin-left" to legend to move the text to right.
使用“ 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>
