我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
这可能有点超出了问题的范围,但我相信这确实有助于其他有类似问题的人。
如果您需要多个单元格,并且不想显式地指定背景颜色,则必须对行的每个部分使用标记。
这允许你使用一个完整的伸缩线来定位元素,例如扩展器
.title-hr { 宽度:100%; vertical-align:中间; 对齐项目:中心; text-align:开始; 显示:flex; } .title-hr >跨度{ 填料:0 0.4em; } .title-hr >。人力资源{ Border-bottom: 1px实心#777; 行高:0.1 em; 保证金:0.34em 0 0.35em; Flex: 1台自动; } .title-hr > .hr。修复{ Flex: 0 1自动; } < div class = " title-hr”> < span > + < / span > <span class="hr fix"></span> 标题< span > < / span > < span class = "人力资源部" > < / span > < / div >
其他回答
<div class="flex items-center">
<div class="flex-grow bg bg-gray-300 h-0.5"></div>
<div class="flex-grow-0 mx-5 text dark:text-white">or</div>
<div class="flex-grow bg bg-gray-300 h-0.5"></div>
</div>
献给所有喜欢顺风的人。 灵感来自于WellSpring的回答
好吧,这个更复杂,但它适用于所有浏览器,除了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/
使用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>
以防有人想这样做,依我看,使用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,可以使它们平等地占用最多的空白空间,同时保持内容的中心。
希望这能有所帮助!
这为您提供了固定的线条长度,但效果很好。 行长可以通过添加或取'\00a0' (unicode空格)来控制。
H1:前,H1:后{ 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 '; 文字修饰:线穿过; 保证金:自动0.5em; } <标题>边线h1 > < /