我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
<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的回答
其他回答
下面是我对Bootstrap 5的简单解决方案,只使用预定义的类:
<div class="py-3 d-flex align-items-center">
<hr class="flex-grow-1" />
<div class="badge bg-secondary">OR</div>
<hr class="flex-grow-1" />
</div>
结果:
你可以将它作为React组件重用,例如:
export default function Divider({ text }) {
return <div className="py-3 d-flex align-items-center">
<hr className="flex-grow-1" />
<div className="badge bg-secondary">{ text }</div>
<hr className="flex-grow-1" />
</div>;
}
我一直在寻找这个简单的装饰的一些解决方案,我发现了相当多的,一些奇怪的,一些甚至用JS来计算字体的高度和bla,bla,bla,然后我读了这篇文章,读了一个评论从thirtydot谈到fieldset和传说,我认为这就是它。
我重写了这2个元素样式,我猜你可以复制它们的W3C标准,并将其包含在你的.middle-line-text类(或任何你想叫它的)中,但这是我所做的:
<fieldset class="featured-header">
<legend>Your text goes here</legend>
</fieldset>
<style>
.featured-header{
border-bottom: none;
border-left: none;
border-right: none;
text-align: center;
}
.featured-header legend{
-webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
-webkit-padding-end: 8px;
background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
font-weight: normal; /* I preffer the text to be regular instead of bold */
color: YOU_CHOOSE;
}
</style>
这是小提琴:http://jsfiddle.net/legnaleama/3t7wjpa2/
我玩了边界样式,它也可以在Android;)(在kitkat 4.XX上测试)
编辑:
遵循Bekerov Artur的想法,这也是一个不错的选择,我已经改变了。png base64图像创建一个。svg的笔画,这样你就可以在任何分辨率渲染,也可以改变元素的颜色,而不需要任何其他软件的参与:)
/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
没有伪元素,没有附加元素。只有一个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变量。
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 >
<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/