我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
最短最佳方法:
跨度:之后, 跨度:{之前 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0”; 文字修饰:线穿过; } <span>你的文本</span>
其他回答
我已经尝试了大多数建议的方法,但结束了一些问题,如全宽度,或不适合动态内容。最后我修改了一个代码,并完美地工作。这个示例代码将在之前和之后绘制这些线条,并且在内容更改方面非常灵活。中心对齐。
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/
我认为最直接的方法是使用CSS网格。
h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; } h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; } <标题>标题< h2 >
如果你正在使用React与样式组件。我发现分离元素更简单。不是“神奇的解决方案”,但它确实有效。
import React from 'react';
import styled from "@emotion/styled";
const Container = styled.div`
padding-top: 210px;
padding-left: 50px;
display: inline-flex;
`
const Title1 = styled.div`
position: absolute;
font-size: 25px;
left:40px;
color: white;
margin-top: -17px;
padding-left: 40px;
`
const Title2 = styled.div`
position: absolute;
font-size: 25px;
left:1090px;
color: white;
margin-top: -17px;
padding-left: 40px;
`
const Line1 = styled.div`
width: 20px;
border: solid darkgray 1px;
margin-right: 90px;
`
const Line2 = styled.div`
width: 810px;
border: solid darkgray 1px;
margin-right: 126px;
`
const Line3 = styled.div`
width: 178px;
border: solid darkgray 1px;
`
const Titulos = () => {
return (
<Container>
<Line1/>
<Title1>
FEATURED
</Title1>
<Line2/>
<Line1/>
<Title2>
EXCLUSIVE
</Title2>
<Line3/>
</Container>
);
};
export default Titulos;
结果:
最短最佳方法:
跨度:之后, 跨度:{之前 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0”; 文字修饰:线穿过; } <span>你的文本</span>
下面是我对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>;
}