相关疑难解决方法(0)

我正在尝试制作一个水平规则,中间有一些文字.例如:

-----------------------------------我的头衔------------ -----------------

有没有办法在CSS中做到这一点？没有所有" - "破灭显然.

我想知道在xhtml 1.0 strict中有什么选项可以在文本的两边创建一条线 - 所以:

Section one
----------------------- Next section -----------------------
Section two

我想过做一些像这样的奇特事情:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

或者,因为上面的对齐问题(垂直和水平):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

这也有对齐问题,我解决这个问题:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

除了对齐问题之外,这两个选项都感觉"有点",如果你以前碰巧看过这个问题并且知道一个优雅的解决方案,我会非常感激.

问题

问题是以下内容适用于Chrome,Opera和IE ^_(!？),但在Firefox中不起作用:

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

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

导致Chrome

Firefox中的结果

解决方案黑客

有几个问题,但没有一个令人满意的答案:

/* 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> …