我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在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>;
}
其他回答
我选择了一个更简单的方法:
HTML
<div class="box">
<h1 class="text">OK THEN LETS GO</h1>
<hr class="line" />
</div>
CSS
.box {
align-items: center;
background: #ff7777;
display: flex;
height: 100vh;
justify-content: center;
}
.line {
border: 5px solid white;
display: block;
width: 100vw;
}
.text {
background: #ff7777;
color: white;
font-family: sans-serif;
font-size: 2.5rem;
padding: 25px 50px;
position: absolute;
}
结果
这是一个基于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/
这大概就是我要做的:通过设置包含h2的border-bottom来创建行,然后给h2一个较小的行高。然后将文本放在具有非透明背景的嵌套span中。
h2 { 宽度:100%; text-align:中心; Border-bottom: 1px实心#000; 行高:0.1 em; Margin: 10px 0 20px; } H2跨度{ 背景:# fff; 填充:0 10 px; } <h2><span>THIS IS A TEST</span></h2> <p>这是一些其他的内容</p>
我只在Chrome上进行了测试,但没有理由它不能在其他浏览器上运行。
JSFiddle: http://jsfiddle.net/7jGHS/
不是白费口舌,但我一直在寻找一个解决方案,最终来到这里,我自己对这些选项不满意,尤其是由于某种原因,我无法得到这里提供的解决方案。(可能是我的失误造成的…)但我一直在玩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/
在尝试了不同的解决方案后,我有一个有效的不同的文本宽度,任何可能的背景,没有添加额外的标记。
h1 { 溢出:隐藏; text-align:中心; } h1:之前, h1:{后 background - color: # 000; 内容:“”; 显示:inline-block; 身高:1 px; 位置:相对; vertical-align:中间; 宽度:50%; } h1:{之前 右:0.5 em; margin-left: -50%; } h1:{后 左:0.5 em; margin-right: -50%; } <标题>标题< / h1 > <h1>这是一个较长的标题</h1>
我在IE8、IE9、Firefox和Chrome浏览器上进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/