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

除了对齐问题,这两种选择都让人感觉"笨拙",如果你以前碰巧看到过这一点,并知道一个优雅的解决方案,我会非常感激的.

推荐答案

Flexbox是解决方案:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}
<div class="separator">Next section</div>

现在是every browser supports it,如果需要,可以通过添加相应的供应商前缀来确保与已有十年历史的浏览器的兼容性.无论如何,它都会优雅地退化.

Html相关问答推荐

关于自动边距与绝对定位的混淆

如何在按钮的中心添加两条线

我可以使用 Markdown 在 hugo 帖子内容中创建带有 'target="_blank"' 的链接吗?

溢出:隐藏对 :after 和 :before 伪元素不起作用

带弹性框的距离列间距(css)

如何使用变换来对齐 HTML 中的图例?

如何使我的标题布局是这样的?

为什么 div 可以正确拉伸,但不能正确拉伸图像?

使用smoke动画减小ring大小

abel(input type="radio") 不在中心

如何在显示块 div 中移动文本