我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
不是白费口舌,但我一直在寻找一个解决方案,最终来到这里,我自己对这些选项不满意,尤其是由于某种原因,我无法得到这里提供的解决方案。(可能是我的失误造成的…)但我一直在玩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/
其他回答
如果有人想知道如何设置标题,使其显示在左侧的固定距离(而不是如上所示的居中),我通过修改@Puigcerber的代码来解决这个问题。
h1 {
white-space: nowrap;
overflow: hidden;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
}
h1:before {
right: 0.3em;
width: 50px;
}
h1:after {
left: 0.3em;
width: 100%;
}
这里是JSFiddle。
使用Bootstrap 4的人可以用这种方法实现。HTML代码中提到的类来自Bootstrap 4。
h1 {
position: relative;
flex-grow: 1;
margin: 0;
}
h1:before {
content: "";
display: block;
border-top: solid 2px blue;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}
h1 span {
background: #fff;
left: 12%;
padding: 0 15px;
position: relative;
z-index: 5;
}
然后像这样编写HTML
<div class="d-flex flex-row align-items-center">
<h1><span> Title </span> </h1>
</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/
使用Bootstrap 4预定义类
<div class="row align-items-center">
<div class="col dropdown-divider"></div>
<div class="col-auto">OR</div>
<div class="col dropdown-divider"></div>
</div>
我不太确定,但您可以尝试使用水平规则,并将文本推到其上边距之上。你还需要一个固定宽度的段落标签和背景。这有点粗糙,我不知道它是否适用于所有浏览器,你需要根据字体大小设置负边距。虽然chrome的工作。
<style>
p{ margin-top:-20px; background:#fff; width:20px;}
</style>
<hr><p>def</p>