我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
这里有一个解决方案,只需要2个属性,很容易更新使用CSS变量:
h2 { --s: 3px; /* the thickness */ --c: red; /* the color */ --w: 100px; /* the width */ --g: 10px; /* the gap */ border: 1px solid; border-image: linear-gradient( #0000 calc(50% - var(--s)/2), var(--c) 0 calc(50% + var(--s)/2), #0000 0) 0 1/0 var(--w)/0 calc(var(--w) + var(--g)); } h2 { font-size: 2rem; margin: 20px auto; width: fit-content; } body { font-family: system-ui, sans-serif; } <h2>I am a Title</h2> <h2 style="--g:50px;--c:purple">Adding some gap </h2> <h2 style="--w:100vw;--c:blue;--s:7px">Title</h2> <h2 style="--c:green;--s:5px;--w:50px;--g:20px">Another Title</h2>
其他回答
<div class="flex items-center">
<div class="flex-grow bg bg-gray-300 h-0.5"></div>
<div class="flex-grow-0 mx-5 text dark:text-white">or</div>
<div class="flex-grow bg bg-gray-300 h-0.5"></div>
</div>
献给所有喜欢顺风的人。 灵感来自于WellSpring的回答
透明的单元素动态解决方案:
h2 { display:table; /* fit content width*/ margin:20px auto; /* center*/ padding:0 10px; /* control the space between the text and the line */ box-shadow:0 0 0 100px red; /* control the line length and color here */ --s:2px; /* control the line thickness*/ clip-path: polygon(0 0,100% 0, 99% calc(50% - var(--s)/2), 200vmax calc(50% - var(--s)/2), 200vmax calc(50% + var(--s)/2), 99% calc(50% + var(--s)/2), 100% 100%,0 100%, 1px calc(50% + var(--s)/2), -200vmax calc(50% + var(--s)/2), -200vmax calc(50% - var(--s)/2), 1px calc(50% - var(--s)/2)); } body { background: pink; } <h2>a Title here </h2> <h2 style="box-shadow:0 0 0 100vmax blue;">Title</h2> <h2 style="box-shadow:0 0 0 200px green;--s:5px">Another title Title</h2>
<div><span>text TEXT</span></div>
div {
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: white;
display: inline-block;
}
为span设置padding,使文本和行之间有更多的空间。
例如:http://jsfiddle.net/tUGrf/
这里有一个解决方案,只需要2个属性,很容易更新使用CSS变量:
h2 { --s: 3px; /* the thickness */ --c: red; /* the color */ --w: 100px; /* the width */ --g: 10px; /* the gap */ border: 1px solid; border-image: linear-gradient( #0000 calc(50% - var(--s)/2), var(--c) 0 calc(50% + var(--s)/2), #0000 0) 0 1/0 var(--w)/0 calc(var(--w) + var(--g)); } h2 { font-size: 2rem; margin: 20px auto; width: fit-content; } body { font-family: system-ui, sans-serif; } <h2>I am a Title</h2> <h2 style="--g:50px;--c:purple">Adding some gap </h2> <h2 style="--w:100vw;--c:blue;--s:7px">Title</h2> <h2 style="--c:green;--s:5px;--w:50px;--g:20px">Another Title</h2>
编辑(09/2020)
显示:flex方法似乎是当今最可靠、最容易设置的方法。
写于3月17 '15 17:06:
对于后来(现在)的浏览器,display:flex和伪元素使得无需额外标记即可轻松绘制。
如果你需要花哨或难看的妆容,边框风格,盒影甚至背景也有助于化妆。 h1 {margin-top: 50 px; 显示:flex; 背景:线性渐变(向左、灰色、浅灰色,白色,黄色,绿色);; } H1:前,H1:后{ 颜色:白色; 内容:”; flex: 1; 边界底部:槽2 px; 保证金:汽车0.25 em; /* ou 0 1px si border-style:ridge */ } <h1>侧线通过flex</h1>
资源(2020年9月新增):
https://css-tricks.com/snippets/css/a-guide-to-flexbox/(参见这里使用的flex/flex-grow) https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ (margin:auto 0.25em;此处使用)