我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
我已经尝试了大多数建议的方法,但结束了一些问题,如全宽度,或不适合动态内容。最后我修改了一个代码,并完美地工作。这个示例代码将在之前和之后绘制这些线条,并且在内容更改方面非常灵活。中心对齐。
HTML
<div style="text-align:center">
<h1>
<span >S</span>
</h1>
</div>
<div style="text-align:center">
<h1>
<span >Long text</span>
</h1>
</div>
CSS
h1 {
display: inline-block;
position: relative;
text-align: center;
}
h1 span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
h1:before {
background: #ddd;
content: "";
height: 1px;
position: absolute;
top: 50%;
width: calc(100% + 50px);//Support in modern browsers
left: -25px;
}
h1:before {
left: ;
}
结果: https://jsfiddle.net/fasilkk/vowqfnb9/
其他回答
这可能有点超出了问题的范围,但我相信这确实有助于其他有类似问题的人。
如果您需要多个单元格,并且不想显式地指定背景颜色,则必须对行的每个部分使用标记。
这允许你使用一个完整的伸缩线来定位元素,例如扩展器
.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 >
好吧,这个更复杂,但它适用于所有浏览器,除了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/
这大概就是我要做的:通过设置包含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/
h6 {
font: 14px sans-serif;
margin-top: 20px;
text-align: center;
text-transform: uppercase;
font-weight: 900;
}
h6.background {
position: relative;
z-index: 1;
margin-top: 0%;
width:85%;
margin-left:6%;
}
h6.background span {
background: #fff;
padding: 0 15px;
}
h6.background:before {
border-top: 2px solid #dfdfdf;
content: "";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 50%;
left: 0;
right: 0;
bottom: 0;
width: 95%;
z-index: -1;
}
这对你有帮助