Question

之前曾多次询问（但从未真正回答过）我希望将一个图例集中在一个字段集中。

这里的诀窍很完美，我也为我的项目购买了http://themeforest.net/item/aloma-liquid-mobile-template/full_screen_preview/5819068

来自css的代码如下所示

fieldset {
      display: block;
      margin: 20px 1%;
      margin-bottom: 20px;
      padding: 0 auto;
      padding: 15px 0;
      border: 0;
      border-top: 1px solid #DDD;
      width: 98%;
}

legend {
     display: table; 
     min-width: 0px;
     max-width: 70%;
     position: relative;
     margin: auto;
     padding: 5px 20px;
     color: #eee8aa;
     font-size: 20px;
     text-align: center;
}

但是当我尝试在我的项目中的另一个页面中重做它时，我没有使用该主题，我失败了。我在上面的代码中遗漏了什么吗？

Answer 1

主题使用修复Firefox问题的代码<legend align="center">：

http://jsfiddle.net/ncv8H/

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

Answer 2

在HTML 5中，图例对齐属性已被折旧，所以我就是这样做的。

请注意，Bootstrap 4（不知道大约3个）完全隐藏了字段集边框并将图例宽度设置为100％。因此，除了添加width：auto之外，如果要显示，还必须使用css设置字段集边框。

legend {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

的

<legend>Legend</legend>

Fieldset：中心图例

2 个答案: