将居中文本添加到水平规则的中间

我想知道在xhtml 1.0中有什么选项可以严格地在文本的两侧创建一行，就像这样:

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>

除了对齐问题之外，这两个选项都让人感觉“糊里糊涂”，如果你之前碰巧看到过这个，并且知道一个优雅的解决方案，我将非常感激。

当前回答

只使用

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

2014-08-07 12:09:18

其他回答

你可以使用相对位置在父节点上设置一个高度

.fake-legend { 高度:15 px; 宽度:100%; Border-bottom:固体2px #000; text-align:中心; Margin: 2em 0; ｝ .fake-legend span { 背景:# fff; 位置:相对; 上图:0; 填充:0 20px; 行高:30 px; ｝ < p class = " fake-legend " > < span >或< / span > < / p >

2015-02-11 17:18:27

如何:

看看这个JSFiddle。

您可以使用vw或%使其响应。

2010-05-11 17:09:13

你可以不需要<hr />就完成这个任务。从语义上讲，设计应该用CSS的手段来完成，在这种情况下是很有可能的。

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

2010-05-11 17:07:56

您可以使用CSS flex属性

HTML

<div class="hrtext">
  <div class="hrbefore">
    <hr>
  </div>
  <div class="hrcontent">
    <h2>TABLE OF CONTENT</h2>
  </div>
  <div class="hrafter">
    <hr>
  </div>
</div>

CSS

.hrtext{
    display:flex;
    align-items:center;
}
.hrbefore,.hrafter{
    flex:auto;
}
.hrcontent{
    text-align:center;
}

2021-02-01 06:00:56

这为我工作，不需要背景颜色后面的文本隐藏边界线，而是使用实际的hr标签。你可以调整宽度来得到不同大小的hr线。

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>

2014-08-01 06:53:02

将居中文本添加到水平规则的中间

推荐文章

最新文章

标签