I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:

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

I've thought of doing some fancy things like this:

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

Or alternatively, because the above has problems with alignment (both vertical and horizontal):

<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>

This also has alignment problems, which I solve with this mess:

<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>

In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.

推荐答案

Flexbox is the solution:

.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>

Nowadays every browser supports it, and you can ensure compatibility with decade-old browsers by adding respective vendor prefixes if needed. It would degrade gracefully anyways.

Html相关问答推荐

有没有一种方法可以用css和html在桌面上并排显示列,在移动设备上显示一个下方的列?

输入宽度在表格显示上不起作用FLEX溢出隐藏Firefox

需要帮助实现悬停动画效果

滚动两个不同高度的DIV;一个等待另一个

Div中的图像问题-(TailWind CSS中的网格)

Angular -表和源映射中未显示的数据错误

禁用的文本区域会丢失换行符

在TWebLabel标题中设置换行符/换行符的方法?

是否可以只使用css而不使用像&;nbsp;这样的HTML符号来实现断字而不换行空格?

如何用背景色填充边框半径创建的间隙

如何使VS代码支持以模仿嵌套的方式对已经包含注释的HTML进行注释?

如何制作';在第';页中搜索;是否发现多个元素中的单词?

元素offsetTop在滚动容器中时没有更改

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

我正在使用 NVDA 并多次读取关闭按钮,但它的读取非常完美

如何将图像移动到父容器的右侧?

我无法设置使用 Tailwind CSS 创建的仪表板的网格 struct

在不扭曲图像的情况下将图像放入灵活的 Div 框内

表格布局:固定;文本溢出单元格时不起作用