我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
最短最佳方法:
跨度:之后, 跨度:{之前 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0”; 文字修饰:线穿过; } <span>你的文本</span>
其他回答
这大概就是我要做的:通过设置包含h2的border-bottom来创建行,然后给h2一个较小的行高。然后将文本放在具有非透明背景的嵌套span中。
h2 { 宽度:100%; text-align:中心; Border-bottom: 1px实心#000; 行高:0.1 em; Margin: 10px 0 20px; } H2跨度{ 背景:# fff; 填充:0 10 px; } <h2><span>THIS IS A TEST</span></h2> <p>这是一些其他的内容</p>
我只在Chrome上进行了测试,但没有理由它不能在其他浏览器上运行。
JSFiddle: http://jsfiddle.net/7jGHS/
使用Bootstrap 4的人可以用这种方法实现。HTML代码中提到的类来自Bootstrap 4。
h1 {
position: relative;
flex-grow: 1;
margin: 0;
}
h1:before {
content: "";
display: block;
border-top: solid 2px blue;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}
h1 span {
background: #fff;
left: 12%;
padding: 0 15px;
position: relative;
z-index: 5;
}
然后像这样编写HTML
<div class="d-flex flex-row align-items-center">
<h1><span> Title </span> </h1>
</div>
这段代码将正常工作:
/* پخش زنده*/ .div-live { text-align:中心; } .span-live { 显示:inline-block; 颜色:# b5b5b5; } .span-live:之前, .span-live:{后 Border-top: 1px solid #b5b5b5; 显示:块; 身高:1 px; 内容:“”; 宽度:30%; 位置:绝对的; 左:0; 上图:3快速眼动; } .span-live:{后 右:0; 左:汽车; } < div class = " div-live”> <span class="span-live">پخش زنده</span> < / div >
这是一个基于Flex的解决方案。
h1 { 显示:flex; flex-direction:行; } h1:之前,h1:{后 内容:“”; Flex: 11; Border-bottom: 1px solid; 保证金:汽车; } h1:{之前 margin-right: 10 px } h1:{后 margin-left: 10 px } 今天< h1 > < / h1 >
JSFiddle: https://jsfiddle.net/j0y7uaqL/
这里有一个解决方案,只需要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>