小编典典

将居中文字添加到中间<hr />样线

html

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

除了对齐问题之外,这两个选项都让人感到“前途未卜”,如果您碰巧曾经见过这一点并且知道一种优雅的解决方案,我将非常感激。


阅读 1178

收藏
2020-05-10

共1个答案

小编典典

我不知道这是否已经解决,但是flexbox提供了一个解决方案:

<div class="separator">Next section</div>

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}
2020-05-10