WP如何制作分隔线（ [重复]） _分隔线

这个问题已经在这里有了答案：
两侧各有一条水平线的标题[重复](3个答案)
2年前关闭。
我试图弄清楚如何制作两条分隔线, 这些分隔线由文本分隔。例如看图片

文章图片
我可以写一行
但我不知道该怎么做两个那个或内联的中间有文本。
#1 如果背景只是纯色, 则可以创建宽度为100％的容器；高度：1像素的容器, 并将文本放在中间, 具有更大的z索引和与页面背景相同的背景色。
这是一个示例(使用伪元素创建线)

body { background: #fafafa; font-size: 15px; font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }.section-header { position: relative; text-align: center; }.section-header:before { content: ''; z-index: 1; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 1px; background: #dddddd; } .section-header__title {position: relative; z-index: 2; background: #fafafa; padding: 5px 20px; font-weight: 700; font-size: 20px; text-transform: uppercase; display: inline-block; color: #174750; }

< div class="section-header"> < span class="section-header__title"> Day 1< /span> < /div>

#2 尝试这个。创建一个具有两个小时和一个跨度的div。然后给它一些样式。例如：

< style> .pos_left{ color: #f00; width: 40%; } .pos_right{ color: #f00; width: 40%; } span{ width: 10%; }.line{ position: absolute; top: 10%; width: 40%; display: flex; flex-wrap: wrap; } < /style> < div class='line'> < hr class='pos_left'> < span> Day 1< /span> < hr class='pos_right'> < /div>

你可以相应地设置样式和位置。
#3 【WP如何制作分隔线（ [重复]）】这样的事情应该可以正常工作。另外, 如果要增加文本和行之间的间距, 只需增加” padding：0px 10px; ” 的第二个值即可。例如。 “ 填充：0px 25px；”

< div style="margin-top: 20px; width: 100%; height: 10px; border-bottom: 1px solid #e3e3e3; text-align: center; margin-bottom: 30px; "> < span style="font-size: 15px; background-color: #ffffff; padding: 0px 10px; "> SOME TEXT HERE< /span> < /div>