我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
h6 {
font: 14px sans-serif;
margin-top: 20px;
text-align: center;
text-transform: uppercase;
font-weight: 900;
}
h6.background {
position: relative;
z-index: 1;
margin-top: 0%;
width:85%;
margin-left:6%;
}
h6.background span {
background: #fff;
padding: 0 15px;
}
h6.background:before {
border-top: 2px solid #dfdfdf;
content: "";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 50%;
left: 0;
right: 0;
bottom: 0;
width: 95%;
z-index: -1;
}
这对你有帮助
其他回答
<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/
我不太确定,但您可以尝试使用水平规则,并将文本推到其上边距之上。你还需要一个固定宽度的段落标签和背景。这有点粗糙,我不知道它是否适用于所有浏览器,你需要根据字体大小设置负边距。虽然chrome的工作。
<style>
p{ margin-top:-20px; background:#fff; width:20px;}
</style>
<hr><p>def</p>
这为您提供了固定的线条长度,但效果很好。 行长可以通过添加或取'\00a0' (unicode空格)来控制。
H1:前,H1:后{ 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 '; 文字修饰:线穿过; 保证金:自动0.5em; } <标题>边线h1 > < /
使用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>
我认为最直接的方法是使用CSS网格。
h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; } h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; } <标题>标题< h2 >