Html 将居中文本添加到水平线的中间

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>

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

Html相关问答推荐

当在双引号｜Angular .html文件中使用时，Pretier会将单引号字符替换为&；Quot；

如何使用html和css关键帧创建动画

在将DevExtreme升级到版本23.2之后，到处都会生成一个Pesudo类，我在其中使用了<；DXi-Item Title=&Quot；&Quot；>；

背景可点击，而不是文本

每个元素的CSS网格高度相等，以保持响应性

如何用等宽字体固定数字在有序列表中的位置

响应网格，响应调整大小以适应父div，保留父div S自己的响应高度

悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

Tailwind CSS 忽略我的元素的填充

使用 popover api 和 `

` 作为调用元素

使单行路径的 svg 填充父级的 100% 宽度

在选项标签中如何添加Django模板的条件

屏幕缩小时背景图像裁剪高度

在 vscode 中找不到 htmltagwrap 命令

如何根据行中的其中一列将行居中？

当我将鼠标悬停在测试类上时，左侧类的 colored颜色 没有改变

文本溢出：省略号不适用于 flexbox

如何使用 css 将图像变成黑色并使文本出现在悬停时？

如何向上移动图像并溢出图像的一部分而另一部分不溢出

如何计算没有根元素的先前 html 标记(lxml python3)编辑：还获取元素