在Firefox中居中图例 [英] Centering legend in Firefox

问题描述

问题

问题是以下在Chrome，Opera和IE _{^（！？）} 但不能在Firefox中使用：

  fieldset> legend {display：table ; float：none; margin：0 auto;}  

 < fieldset& < legend>图例< / legend>< / fieldset>  

Chrome中的结果

Firefox中的结果

解决方案 Hacks

是几个问题，但没有一个满意的答案：

  / * * / fieldset> legend {display：table; float：none; margin：0 auto;} fieldset.absolute-fix {position：relative;} fieldset.absolute-fix> legend {position：absolute; left：50％;} fieldset.margin-fix> legend {margin-left：50％; margin-right：50％; width：auto; transform：translate（-50％，0）} fieldset.width-fix> legend {width：100％; text-align：center;}  

 < fieldset class = absolute-fix> < legend> Fix with absolute< / legend> < p>不居中且不一致的样式< / p> < a href =http://stackoverflow.com/a/4006871/1185053>来源< / a>< / fieldset>< fieldset class =attribute-fix> < legend align =center>修正属性< / legend> < p>需要使用折旧的HTML，并将演示内容与内容紧密结合。< / p> < a href =http://stackoverflow.com/a/19969606/1185053>来源< / a>< / fieldset>< fieldset class =margin-fix> < legend>修正边距< / legend> < p>这是不满意的，因为在边界中存在一个不对齐的间隙，并且长说明跨过几行。< / p>< / fieldset>< fieldset class =width-fix> < legend>修正宽度< / legend> < p>< / fieldset>  
 

问题

有没有办法不断地集中图例

此解决方案使用Firefox特定的选择器，因此我们不需要触摸其他浏览器的样式。它使用绝对定位，但使用 transform 属性正确居中。

 < fieldset& < legend> Fix using absolute and transform< / legend> < p>< / fieldset>  
 

$ b

Chrome中的结果

Firefox中的结果

The problem

The problem is that the following works in Chrome, Opera and IE ^_(!?) but does not work in Firefox:

fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

Result in Chrome

Result in Firefox

Solutions Hacks

There are a few questions around but none have satisfying answers:

/* intended styling */
fieldset>legend {
    display: table;
    float: none;
    margin: 0 auto;
}

fieldset.absolute-fix {
    position: relative;
}
fieldset.absolute-fix>legend {
    position: absolute;
    left: 50%;
}

fieldset.margin-fix>legend {
    margin-left: 50%;
    margin-right: 50%;
    width: auto;
    transform: translate(-50%, 0)
}

fieldset.width-fix>legend {
    width: 100%;
    text-align: center;
}

<fieldset class="absolute-fix">
    <legend>Fix with absolute</legend>
    <p>Not centered and inconsitant styling</p>
    <a href="http://stackoverflow.com/a/4006871/1185053">Source</a>
</fieldset>

<fieldset class="attribute-fix">
    <legend align="center">Fix with attribute</legend>
    <p>Requires use of depreciated HTML and strongly ties presentation to content.</p>
    <a href="http://stackoverflow.com/a/19969606/1185053">Source</a>
</fieldset>

<fieldset class="margin-fix">
    <legend>Fix with margin</legend>
    <p>This is unsatisfying because there is a mis-aligned gap in the border and long legends go over several lines.</p>
</fieldset>

<fieldset class="width-fix">
    <legend>Fix with width</legend>
    <p>This is unsatisfying because there is a gaping hole in the border.</p>
</fieldset>

Question

Is there a way to constantly center legend in Firefox, whilst maintaining styling for other browsers?

解决方案

This solution uses a Firefox specific selector so we don't need to touch the styling for the other browsers. It uses absolute positioning but uses the transform property to center appropriately.

/* indended styling for other browsers */
fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

/* FF only */
@media screen and (-moz-images-in-menus: 0) {
  fieldset {
    position: relative;
  }
  fieldset>legend {
    position: absolute;
    left: 50%;
    top: -12px; /* depends on font size and border */
    background: white; /* depends on background */
    transform: translate(-50%, 0);
  }
}

<fieldset>
  <legend>Fix using absolute and transform</legend>
  <p>This seems to work a bit better.</p>
</fieldset>

Result in Chrome

Result in Firefox

这篇关于在Firefox中居中图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！