我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
不是白费口舌,但我一直在寻找一个解决方案,最终来到这里,我自己对这些选项不满意,尤其是由于某种原因,我无法得到这里提供的解决方案。(可能是我的失误造成的…)但我一直在玩flexbox,这里有一些东西是我自己做的。
有些设置是硬连接的,但仅用于演示目的。我认为这个解决方案应该适用于任何现代浏览器。只需删除/调整.flex-parent类的固定设置,调整颜色/文本/内容,(我希望)你会像我一样喜欢这种方法。
HTML:
.flex-parent { 显示:flex; 宽度:300 px; 高度:20 px; 对齐项目:中心; } .flex-child-edge { flex-grow: 2; 身高:1 px; background - color: # 000; 边框:1px #000固体; } .flex-child-text { flex-basis:汽车; flex-grow: 0; 边框:0px 5px 0px 5px; text-align:中心; } < div class = " flex-parent”> < div class = " flex-child-edge " > < / div > <div class="flex-child-text">我发现这更简单!< / div > < div class = " flex-child-edge " > < / div > < / div >
我还保存了我的解决方案: https://jsfiddle.net/Wellspring/wupj1y1a/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/
好吧,这个更复杂,但它适用于所有浏览器,除了IE<8
<div><span>text TEXT</span></div>
div {
text-align: center;
position: relative;
}
span {
display: inline-block;
}
span:before,
span:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.2em;
}
span:after {
right: 0;
left: auto;
}
:before和:after元素的位置是绝对的,因此我们可以将一个元素拉到左边,一个元素拉到右边。此外,宽度(在本例中为40%)非常依赖于内部文本的宽度。我得想个解决办法。至少在顶部:1.2em可以确保即使字体大小不同,线条也或多或少地保持在文本的中心。
它似乎工作得很好:http://jsfiddle.net/tUGrf/3/
CSS网格是救星
类似于上面的flex答案,这也可以使用CSS网格来完成。这为您提供了更大的范围来偏移标题,以及一种更简单的方式来扩大行(使用网格-模板-列)和内容(使用网格-间隙)之间的间隙。
与flex方法相比,该方法的优点是易于偏移行,并且只需要在列之间添加一次间隙(而不是两次,对于每个:before和:after伪元素)。在我看来,它在语法上也更清晰和明显。
h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 对齐项目:中心; grid-gap: 1快速眼动; } h1:之前, h1:{后 内容:“”; 显示:块; border-top: 2px solid currentColor; } h1。抵消{ Grid-template-columns: 1fr auto 3fr; } h1。biggap { grid-gap: 4快速眼动; } <h1>这是一个标题</h1> <h1 class="offset"> offset title</h1> <h1 class="biggap">Gappy title</h1> <标题> < span >多行标题< br / > < / span > < / h1 >
我使用一个表格布局来动态填充边和0高度,绝对位置div动态垂直定位:
没有硬编码的维度 没有图像 没有它 方面的背景 控制条外观
https://jsfiddle.net/eq5gz5xL/18/
我发现,稍微低于真中心的文字效果最好;这可以在55%的位置进行调整(身高越高,界限越低)。线条的外观可以改变边界底部的位置。
HTML:
<div class="title">
<div class="title-row">
<div class="bar-container">
<div class="bar"></div>
</div>
<div class="text">
Title
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
CSS:
.title{
display: table;
width: 100%
background: linear-gradient(to right, white, lightgray);
}
.title-row{
display: table-row;
}
.bar-container {
display: table-cell;
position: relative;
width: 50%;
}
.bar {
position: absolute;
width: 100%;
top: 55%;
border-bottom: 1px solid black;
}
.text {
display: table-cell;
padding-left: 5px;
padding-right: 5px;
font-size: 36px;
}
<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的回答