在中心对齐字段集图例

Question

HTML

<fieldset class="Fieldset">
    <legend class="Legend" id="Legend">Add</legend>
    ...

CSS

.Fieldset
{
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 10px;
}

.Legend
{
    border: medium none;
    left: 40%;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: auto;
    color: #3C6EAC;
    font-size: 18px;
    font-weight: bold;
}

在Firefox图例居中对齐。 但在Chrome则不然。

Answer 1

添加此CSS ，删除margin :auto & left:40%然后添加margin-left:40% 。

 .Fieldset { border: 1px solid #CCC; border-radius: 5px; padding: 10px; } .Legend { border: medium none; margin-left: 40%; padding: 0 10px; position: relative; text-align: center; width: auto; color: #3C6EAC; font-size: 18px; font-weight: bold; }

 <fieldset class="Fieldset"> <legend class="Legend" id="Legend">Add</legend> </fieldset>

在 JSFiddle 上查看

Answer 2

只需从.Legend删除left:40%和text-align将完成剩下的工作。

 .Fieldset { border: 1px solid #CCC; border-radius: 5px; padding: 10px; } .Legend { border: medium none; margin: 0 auto; padding: 0 10px; position: relative; text-align: center; width: auto; color: #3C6EAC; font-size: 18px; font-weight: bold; }

 <fieldset class="Fieldset"> <legend class="Legend" id="Legend">Add</legend> </fieldset>

在 JSFiddle 上查看

Answer 3

• margin:auto; 正在做所有的工作
• text-align:center; 什么都不做
• left:40%; 干扰margin:auto;

运行这个例子：

 fieldset { border: 1px solid #CCC; border-radius: 5px; padding: 10px; } legend { margin: auto; padding: 0 10px; color: #3C6EAC; font-size: 18px; font-weight: bold; }

 <fieldset> <legend>Long title long title long title long title </legend> </fieldset>

Answer 4

这个帖子很有用。 但是，我设法使用 text-align:center 将图例与中心对齐，如下所示。

legend {
  text-align:center;
}

相同的 StackBlitz 示例在这里： https ://stackblitz.com/edit/angular-nzmpzi