我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
我已经尝试了大多数建议的方法,但结束了一些问题,如全宽度,或不适合动态内容。最后我修改了一个代码,并完美地工作。这个示例代码将在之前和之后绘制这些线条,并且在内容更改方面非常灵活。中心对齐。
HTML
<div style="text-align:center">
<h1>
<span >S</span>
</h1>
</div>
<div style="text-align:center">
<h1>
<span >Long text</span>
</h1>
</div>
CSS
h1 {
display: inline-block;
position: relative;
text-align: center;
}
h1 span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
h1:before {
background: #ddd;
content: "";
height: 1px;
position: absolute;
top: 50%;
width: calc(100% + 50px);//Support in modern browsers
left: -25px;
}
h1:before {
left: ;
}
结果: https://jsfiddle.net/fasilkk/vowqfnb9/
其他回答
透明的单元素动态解决方案:
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>
我认为最直接的方法是使用CSS网格。
h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; } h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; } <标题>标题< h2 >
这可能有点超出了问题的范围,但我相信这确实有助于其他有类似问题的人。
如果您需要多个单元格,并且不想显式地指定背景颜色,则必须对行的每个部分使用标记。
这允许你使用一个完整的伸缩线来定位元素,例如扩展器
.title-hr { 宽度:100%; vertical-align:中间; 对齐项目:中心; text-align:开始; 显示:flex; } .title-hr >跨度{ 填料:0 0.4em; } .title-hr >。人力资源{ Border-bottom: 1px实心#777; 行高:0.1 em; 保证金:0.34em 0 0.35em; Flex: 1台自动; } .title-hr > .hr。修复{ Flex: 0 1自动; } < div class = " title-hr”> < span > + < / span > <span class="hr fix"></span> 标题< span > < / span > < span class = "人力资源部" > < / span > < / div >
编辑(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;此处使用)
使用Flexbox的简单方法
# title-wrapper { 显示:flex; 对齐项目:中心; } .title { flex-wrap:包装; Margin: 0 10px 0 10px; text-align:中心; } .line { flex: 1; 身高:1 px; 背景颜色:黑色; } <节id =“title-wrapper”> < div class = '行' > < / div > <div class='title'>some text</div> < div class = '行' > < / div > < / >节