我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
下面是我对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>;
}
其他回答
这是一个基于Flex的解决方案。
h1 { 显示:flex; flex-direction:行; } h1:之前,h1:{后 内容:“”; Flex: 11; Border-bottom: 1px solid; 保证金:汽车; } h1:{之前 margin-right: 10 px } h1:{后 margin-left: 10 px } 今天< h1 > < / h1 >
JSFiddle: https://jsfiddle.net/j0y7uaqL/
最短最佳方法:
跨度:之后, 跨度:{之前 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0”; 文字修饰:线穿过; } <span>你的文本</span>
以防有人想这样做,依我看,使用CSS的最佳解决方案是使用flexbox。
这里有一个例子:
.kw-dvp-HorizonalButton { color: #0078d7; display:flex; flex-wrap:nowrap; align-items:center; } .kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after { background-color: #0078d7; content: ""; display: inline-block; float:left; height:1px; } .kw-dvp-HorizonalButton:before { order:1; flex-grow:1; margin-right:8px; } .kw-dvp-HorizonalButton:after { order: 3; flex-grow: 1; margin-left: 8px; } .kw-dvp-HorizonalButton * { order: 2; } <div class="kw-dvp-HorizonalButton"> <span>hello</span> </div>
这应该总是会产生一个完美的居中对齐的内容,左边和右边有一条线,线和内容之间有一个容易控制的边缘。
它在顶部控件之前和之后创建一个线元素,并在flex容器中将它们设置为顺序1,3,同时将内容设置为顺序2(进入中间)。 将前/后的值增加为1,可以使它们平等地占用最多的空白空间,同时保持内容的中心。
希望这能有所帮助!
好吧,这个更复杂,但它适用于所有浏览器,除了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网格。
h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; } h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; } <标题>标题< h2 >