Html 将字段集图例对准中心

HTML

---

在

Firefox

中，图例在中心对齐。但是在

Chrome

中，它没有。

添加此

CSS

，删除

margin:auto

和

left:40%

，然后添加

margin left:40%

.Fieldset{
边框：1px实心#CCC；
边界半径：5px；
填充：10px；
}
.传奇{
边界：中等无；
左缘：40%；
填充：0 10px；
位置：相对位置；
文本对齐：居中；
宽度：自动；
颜色：3C6EAC；
字号：18px；
字体大小：粗体；
}

添加

添加此

CSS

，删除

margin:auto

和

left:40%

然后添加

margin left:40%

.Fieldset{
边框：1px实心#CCC；
边界半径：5px；
填充：10px；
}
.传奇{
边界：中等无；
左缘：40%；
填充：0 10px；
位置：相对位置；
文本对齐：居中；
宽度：自动；
颜色：3C6EAC；
字号：18px；
字体大小：粗体；
}

添加

只需从

中删除
左侧：40%
。其余部分由图例和
文本对齐来完成


.Fieldset{
边框：1px实心#CCC；
边界半径：5px；
填充：10px；
}
.传奇{
边界：中等无；
保证金：0自动；
填充：0 10px；
位置：相对位置；
文本对齐：居中；
宽度：自动；
颜色：3C6EAC；
字号：18px；
字体大小：粗体；
}

添加
只需从
中删除
左侧：40%
。其余部分由图例和
文本对齐来完成


.Fieldset{
边框：1px实心#CCC；
边界半径：5px；
填充：10px；
}
.传奇{
边界：中等无；
保证金：0自动；
填充：0 10px；
位置：相对位置；
文本对齐：居中；
宽度：自动；
颜色：3C6EAC；
字号：18px；
字体大小：粗体；
}

添加

页边距：自动正在做所有的工作

文本对齐：居中不做任何事情

左：40%干扰
边距：自动


运行以下示例：


字段集{
边框：1px实心#CCC；
边界半径：5px；
填充：10px；
}
传奇{
保证金：自动；
填充：0 10px；
颜色：3C6EAC；
字号：18px；
字体大小：粗体；
}

长标题长标题长标题长标题

页边距：自动正在做所有的工作

文本对齐：居中不做任何事情

左：40%干扰
边距：自动


运行以下示例：


字段集{
边框：1px实心#CCC；
边界半径：5px；
填充：10px；
}
传奇{
保证金：自动；
填充：0 10px；
颜色：3C6EAC；
字号：18px；
字体大小：粗体；
}

长标题长标题长标题长标题
这篇文章很有用。但是，我只使用文本align:center将图例与中心对齐，如下所示

.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;
}

StackBlitz的例子如下：
这篇文章很有用。但是，我只使用文本align:center将图例与中心对齐，如下所示

.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;
}

StackBlitz的例子如下：
shakhrillo的答案总体上更好，是正确的处理方法。无需添加
左边距：40%
，因为
文本对齐将为您对齐。这只是因为你有
左：40%
在那里，阻止了
文本对齐
的正确工作。@Ruddy，它没有在Firefox中集中对齐图例。嗯，这很奇怪。你是对的，不知道为什么。我倾向于不再使用Firefox，所以我错过了它！在这种情况下，设定利润率可能是下一个最好的方法。沙赫里洛的答案总体上更好，是正确的处理方法。无需添加
左边距：40%
，因为
文本对齐将为您对齐。这只是因为你有
左：40%
在那里，阻止了
文本对齐
的正确工作。@Ruddy，它没有在Firefox中集中对齐图例。嗯，这很奇怪。你是对的，不知道为什么。我倾向于不再使用Firefox，所以我错过了它！在这种情况下，设置边距可能是下一个最好的方法。这是一个更好的答案（阅读更多关于我对这个问题的评论）+1.firefox不友好吗（这是一个更好的答案（阅读更多关于我对这个问题的评论）。+1来自我。对firefox不友好。：（同一个问题有好的答案：同一个问题有好的答案：
legend {
  text-align:center;
}