这个问题在这里已经有了答案:
heading with horizontal line on either side [duplicate]
(3 个回答)
3年前关闭。
我想弄清楚如何制作两个由文本分隔的分隔线。例如看图片
我可以做一行,
但我不知道如何制作两个或内联并在中间有文字。
最佳答案
如果背景只是纯色,那么您可以创建一个容器宽度 width 100%; height: 1px
容器,把文字放在中间,用更大的z-index
和相同的 background color
作为页面背景。
这是一个示例(使用伪元素创建行)
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>
关于html - 如何制作分隔线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50918065/