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

我想知道在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>

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

当前回答

我也遇到过同样的问题，这里有一个解决方法:

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>

它不需要在文本元素上设置背景，也就是说，不管后面是什么背景，它看起来都很好。

你可以在这里试试:http://jsfiddle.net/88vgS/

2012-09-20 23:22:14

其他回答

哇，我的第一个帖子，尽管这是一年以前。为了避免包装器的背景着色问题，可以在hr中使用内联块(没有人明确地说过)。文本对齐应该正确居中，因为它们是内联元素。

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

2011-05-18 12:01:38

我也遇到过同样的问题，这里有一个解决方法:

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>

它不需要在文本元素上设置背景，也就是说，不管后面是什么背景，它看起来都很好。

你可以在这里试试:http://jsfiddle.net/88vgS/

2012-09-20 23:22:14

Flexbox是解决方案:

.separator { 显示:flex; 对齐项目:中心; text-align:中心; ｝ .separator::, {后.separator:: 内容:”; flex: 1; Border-bottom: 1px实心#000; ｝ .separator:没有(空):::{之前 margin-right: .25em; ｝ .separator:没有(空)::{ margin-left: .25em; ｝ <div class="separator">下一节</div> .

现在每个浏览器都支持它，如果需要，您可以通过添加相应的供应商前缀来确保与10年前的浏览器兼容。无论如何，它都会优雅地退化。

2014-10-29 15:22:19

你可以不需要<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

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

推荐文章

最新文章

标签