我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
这为您提供了固定的线条长度,但效果很好。 行长可以通过添加或取'\00a0' (unicode空格)来控制。
H1:前,H1:后{ 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 '; 文字修饰:线穿过; 保证金:自动0.5em; } <标题>边线h1 > < /
其他回答
没有伪元素,没有附加元素。只有一个div:
为了便于控制,我使用了一些CSS变量。
div { --border-height: 2px; --border-color: #000; background: linear-gradient(var(--border-color),var(--border-color)) 0% 50%/ calc(50% - (var(--space) / 2)) var(--border-height), linear-gradient(var(--border-color),var(--border-color)) 100% 50%/ calc(50% - (var(--space) / 2)) var(--border-height); background-repeat:no-repeat; text-align:center; } <div style="--space: 100px">Title</div> <div style="--space: 50px;--border-color: red;--border-height:1px;">Title</div> <div style="--space: 150px;--border-color: green;">Longer Text</div>
但是上面的方法不是动态的。你必须根据文本长度改变——space变量。
<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/
在尝试了不同的解决方案后,我有一个有效的不同的文本宽度,任何可能的背景,没有添加额外的标记。
h1 { 溢出:隐藏; text-align:中心; } h1:之前, h1:{后 background - color: # 000; 内容:“”; 显示:inline-block; 身高:1 px; 位置:相对; vertical-align:中间; 宽度:50%; } h1:{之前 右:0.5 em; margin-left: -50%; } h1:{后 左:0.5 em; margin-right: -50%; } <标题>标题< / h1 > <h1>这是一个较长的标题</h1>
我在IE8、IE9、Firefox和Chrome浏览器上进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/
如果有人想知道如何设置标题,使其显示在左侧的固定距离(而不是如上所示的居中),我通过修改@Puigcerber的代码来解决这个问题。
h1 {
white-space: nowrap;
overflow: hidden;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
}
h1:before {
right: 0.3em;
width: 50px;
}
h1:after {
left: 0.3em;
width: 100%;
}
这里是JSFiddle。
我认为最直接的方法是使用CSS网格。
h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; } h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; } <标题>标题< h2 >