我试着做一个水平规则,中间有一些文本。 例如:

----------------------------------- 我的标题 -----------------------------

在CSS中有办法做到这一点吗?显然没有“-”号。


当前回答

横线和竖线,中间有字

.box{ background-image: url("https://i.stack.imgur.com/N39wV.jpg"); width: 350px; padding: 10px; } /*begin first box*/ .first{ width: 300px; height: 100px; margin: 10px; border-width: 0 2px 0 2px; border-color: red; border-style: solid; position: relative; } .first span { position: absolute; display: flex; right: 0; left: 0; align-items: center; } .first .foo{ top: -8px; } .first .bar{ bottom: -8.5px; } .first span:before{ margin-right: 15px; } .first span:after { margin-left: 15px; } .first span:before , .first span:after { content: ' '; height: 2px; background: red; display: block; width: 50%; } /*begin second box*/ .second{ width: 300px; height: 100px; margin: 10px; border-width: 2px 0 2px 0; border-color: red; border-style: solid; position: relative; } .second span { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; } .second .foo{ left: -15px; } .second .bar{ right: -15.5px; } .second span:before{ margin-bottom: 15px; } .second span:after { margin-top: 15px; } .second span:before , .second span:after { content: ' '; width: 2px; background: red; display: block; height: 50%; } <div class="box"> <div class="first"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> <br> <div class="second"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> </div>

这个问题也在https://stackoverflow.com/a/57279326/6569224得到了回答

其他回答

我选择了一个更简单的方法:

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;
}

结果

我不太确定,但您可以尝试使用水平规则,并将文本推到其上边距之上。你还需要一个固定宽度的段落标签和背景。这有点粗糙,我不知道它是否适用于所有浏览器,你需要根据字体大小设置负边距。虽然chrome的工作。

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

以防有人想这样做,依我看,使用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,可以使它们平等地占用最多的空白空间,同时保持内容的中心。

希望这能有所帮助!

下面是我对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>;
}

不是白费口舌,但我一直在寻找一个解决方案,最终来到这里,我自己对这些选项不满意,尤其是由于某种原因,我无法得到这里提供的解决方案。(可能是我的失误造成的…)但我一直在玩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/