Fieldset: Center legend

我们两清 提交于 2019-12-20 01:43:34

问题


as asked many times before (but never really answered) I want to center a legend in a fieldset.

The trick was done perfectly here, which I also bought for my project: http://themeforest.net/item/aloma-liquid-mobile-template/full_screen_preview/5819068

the code from the css reads like this

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

But when I try to redo it in another page in my project, that doesn't use the theme, I fail. Am I missing something in the code above?


回答1:


The theme uses the code <legend align="center"> which fixes the Firefox issue:

http://jsfiddle.net/ncv8H/

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



回答2:


In HTML 5, the legend align attribute has been depreciated so here is how I did it.

Note that Bootstrap 4 (don't know about 3) completely hides a field set border and sets the legend width to 100%. So in addition to adding the width:auto, you would also have to use css to set the fieldset border if you want it to display.

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

for

<legend>Legend</legend>


来源:https://stackoverflow.com/questions/23377769/fieldset-center-legend

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!