我正在尝试制作一条中间有一些文字的水平线。 例如：
------------------------我的标题在这里--------- --------------------
有没有办法在 CSS 中做到这一点？显然没有所有的“-”破折号。
【问题讨论】：
form标签内吗？
fieldset 和 legend 元素
标签： html css cross-browser
<div><span>text TEXT</span></div>
div {
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: white;
display: inline-block;
}
给 span 一个填充以在文本和行之间留出更多空间。
【讨论】：
我不太确定，但您可以尝试使用水平线并将文本推到其上边距上方。您的段落标签和背景也需要固定宽度。这有点hacky，我不知道它是否适用于所有浏览器，您需要根据字体大小设置负边距。虽然适用于铬。
<style>
p{ margin-top:-20px; background:#fff; width:20px;}
</style>
<hr><p>def</p>
【讨论】：
这就是我的大致做法：通过在包含的h2 上设置border-bottom 然后给h2 一个较小的line-height 来创建行。然后将文本放入具有非透明背景的嵌套span 中。
h2 {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
padding:0 10px;
}<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>我只在 Chrome 中进行了测试，但没有理由它不应该在其他浏览器中运行。
JSFiddle：http://jsfiddle.net/7jGHS/
【讨论】：
好的，这个比较复杂，但它适用于除 IE 之外的所有应用
<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%）非常依赖于内部文本的宽度.. 必须为此考虑解决方案。至少top: 1.2em 可以确保线条或多或少地位于文本的中心，即使您的字体大小不同。
它似乎运作良好：http://jsfiddle.net/tUGrf/3/
【讨论】：
form 标签内使用它。如果他这样做了，我相信你知道，他可以简单地使用 fieldset 和 legend。
在尝试了不同的解决方案后，我提供了一种适用于不同文本宽度、任何可能背景且无需添加额外标记的解决方案。
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}<h1>Heading</h1>
<h1>This is a longer heading</h1>我在 IE8、IE9、Firefox 和 Chrome 中进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/
【讨论】：
h1 { overflow:hidden; ` 文本对齐：左； ` 文本缩进：40px； `}
:after 元素成为块的宽度。我很好奇：margin-right: -50%的作用到底是什么？当我在摸索代码时，缺少该属性会使装饰中断到另一行。即使:after 被分配了 100% 的宽度，我仍然需要 50% 的负边距来使其适合。为什么？
IE8 及更高版本的解决方案...
值得注意的问题：
使用background-color 屏蔽边框可能不是最佳解决方案。如果您有复杂（或未知）的背景颜色（或图像），遮罩最终会失败。此外，如果您调整文本大小，您会注意到白色背景颜色（或您设置的任何颜色）将开始覆盖上方（或下方）行上的文本。
您也不想“猜测”这些部分的宽度，因为它使样式非常不灵活，几乎不可能在内容宽度的响应式网站上实现在改变。
解决方案：
(查看JSFiddle)
不要使用background-color“屏蔽”边框，而是使用您的display 属性。
HTML
<div class="group">
<div class="item line"></div>
<div class="item text">This is a test</div>
<div class="item line"></div>
</div>
CSS
.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }
通过将font-size 属性放在.group 元素上来调整文本大小。
限制：
.line 元素上的 top 属性需要是 line-height 的一半。所以，如果你有一个line-height 或1.5em，那么top 应该是-.75em。这是一个限制，因为它不是自动化的，如果您将这些样式应用于具有不同行高的元素，那么您可能需要重新应用您的 line-height 样式。对我来说，这些限制超过了我在回答开头提到的大多数实现的“问题”。
【讨论】：
最短最好的方法：
span:after,
span:before{
content:"\00a0\00a0\00a0\00a0\00a0";
text-decoration:line-through;
}<span> your text </span>【讨论】：
font-family: monospace; 工作正常。
我一直在寻找这个简单装饰的一些解决方案，我发现了很多，有些奇怪，有些甚至用 JS 来计算字体的高度和 bla,bla,bla，然后我'我已经阅读了这篇文章中的内容，并阅读了来自 thirtydot 的关于 fieldset 和 legend 的评论，我认为就是这样。
我正在覆盖这 2 种元素样式，我想您可以为它们复制 W3C 标准并将其包含在您的 .middle-line-text 类（或任何您想要的名称）中，但这就是我所做的：
<fieldset class="featured-header">
<legend>Your text goes here</legend>
</fieldset>
<style>
.featured-header{
border-bottom: none;
border-left: none;
border-right: none;
text-align: center;
}
.featured-header legend{
-webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
-webkit-padding-end: 8px;
background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
font-weight: normal; /* I preffer the text to be regular instead of bold */
color: YOU_CHOOSE;
}
</style>
这是小提琴：http://jsfiddle.net/legnaleama/3t7wjpa2/
我使用过边框样式，它也适用于 Android ;)（在 kitkat 4.XX 上测试）
编辑：
按照 Bekerov Artur 的想法（这也是一个不错的选择），我更改了 .png base64 图像以使用 .SVG 创建笔触，这样您就可以在任何分辨率下进行渲染，也可以在不使用任何其他软件的情况下更改元素的颜色参与:)
/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
【讨论】：
display:flex 方法似乎是当今最可靠、最容易实施的方法。
写于 2015 年 3 月 17 日 17:06：
对于以后（现在）浏览器，display:flex 和 pseudo-elements 可以轻松绘制而无需额外的标记。
border-style、box-shadow 甚至 background 也有助于化妆，如果你需要它花哨或丑陋。
h1 {margin-top:50px;
display:flex;
background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
color:white;
content:'';
flex:1;
border-bottom:groove 2px;
margin:auto 0.25em;
box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}<h1>side lines via flex</h1>资源（2020 年 9 月添加）：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/（参见此处使用的flex/flex-grow）
https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/（此处使用margin:auto 0.25em;）
【讨论】：
如果有人想知道如何设置标题，使其与左侧有固定距离（而不是如上所示居中），我通过修改 @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。
【讨论】：
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;
}
这对你有帮助
【讨论】：
我使用表格布局动态填充边，使用 0 高度、绝对位置的 div 进行动态垂直定位：
https://jsfiddle.net/eq5gz5xL/18/
我发现稍微低于真实中心的文字看起来最好；这可以在55% 所在的位置进行调整（更高的高度使条形更低）。可以在border-bottom 所在的位置更改线条的外观。
HTML：
<div class="title">
<div class="title-row">
<div class="bar-container">
<div class="bar"></div>
</div>
<div class="text">
Title
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
CSS：
.title{
display: table;
width: 100%
background: linear-gradient(to right, white, lightgray);
}
.title-row{
display: table-row;
}
.bar-container {
display: table-cell;
position: relative;
width: 50%;
}
.bar {
position: absolute;
width: 100%;
top: 55%;
border-bottom: 1px solid black;
}
.text {
display: table-cell;
padding-left: 5px;
padding-right: 5px;
font-size: 36px;
}
【讨论】：
我已经尝试了大多数建议的方法，但以一些问题结束，例如全宽或不适合动态内容。最后我修改了一个代码，并且完美运行。此示例代码将在前后绘制这些线条，并且内容更改非常灵活。中心对齐也。
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: ;
}
【讨论】：
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.35);
margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}<div class="hr-sect">Text</div>【讨论】：
这是基于 Flex 的解决方案。
h1 {
display: flex;
flex-direction: row;
}
h1:before, h1:after{
content: "";
flex: 1 1;
border-bottom: 1px solid;
margin: auto;
}
h1:before {
margin-right: 10px
}
h1:after {
margin-left: 10px
}<h1>Today</h1>JSFiddle：https://jsfiddle.net/j0y7uaqL/
【讨论】：
<h1><span>Today</span></h1>，在跨度上带有边距/填充。
不要打死马，但我正在寻找解决方案，最终来到这里，并且我自己对这些选项不满意，尤其是由于某种原因，我无法让这里提供的解决方案正常工作为了我。 （可能是由于我自己的错误...）但是我一直在玩 flexbox，这是我为自己工作的东西。
某些设置是硬连线的，但仅用于演示目的。我认为这个解决方案应该适用于几乎任何现代浏览器。只需删除/调整 .flex-parent 类的固定设置，调整颜色/文本/内容，（我希望）您会像我一样对这种方法感到满意。
HTML：
.flex-parent {
display: flex;
width: 300px;
height: 20px;
align-items: center;
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #000;
border: 1px #000 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
}<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">I found this simpler!</div>
<div class="flex-child-edge"></div>
</div>我还在这里保存了我的解决方案： https://jsfiddle.net/Wellspring/wupj1y1a/1/
【讨论】：
对我来说，这个解决方案效果很好......
HTML
<h2 class="strikethough"><span>Testing Text</span></h2>
CSS
.strikethough {
width:100%;
text-align:left;
border-bottom: 1px solid #bcbcbc;
overflow: inherit;
margin:0px 0 30px;
font-size: 16px;
color:#757575;
}
.strikethough span {
background:#fff;
padding:0 20px 0px 0px;
position: relative;
top: 10px;
}
【讨论】：
使用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>
【讨论】：
水平和垂直字在中间
.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>【讨论】：
以防万一，恕我直言，使用 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>这应该始终产生完美居中对齐的内容，左右两边各有一条线，并且该线与您的内容之间的边距易于控制。
它在顶部控件之前和之后创建一个 line 元素，并将它们设置为 flex 容器中的 order 1,3，同时将你的内容设置为 order 2（进入中间）。 给 before/after 增加 1 将使它们平均占用最空闲的空间，同时保持您的内容居中。
希望这会有所帮助！
【讨论】：
类似于上面的flex 答案，这也可以使用CSS Grids 来完成。这为您提供了更大的偏移标题的空间，以及一种更简单的方法来扩大行（使用grid-template-columns）和内容（使用grid-gap）之间的差距。
这种方法相对于 flex 方法的好处是可以很容易地偏移线，另外只需要在列之间添加一次间隙（不是两次，对于每个 :before 和 :after 伪元素)。它在语法上也更加清晰和明显的 IMO。
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
grid-gap: 1rem;
}
h1:before,
h1:after {
content: "";
display: block;
border-top: 2px solid currentColor;
}
h1.offset {
grid-template-columns: 1fr auto 3fr;
}
h1.biggap {
grid-gap: 4rem;
}<h1>This is a title</h1>
<h1 class="offset">Offset title</h1>
<h1 class="biggap">Gappy title</h1>
<h1>
<span>Multi-line<br />title</span>
</h1>【讨论】：
此代码将正常工作：
/* پخش زنده*/
.div-live {
text-align: center;
}
.span-live {
display: inline-block;
color: #b5b5b5;
}
.span-live:before,
.span-live:after {
border-top: 1px solid #b5b5b5;
display: block;
height: 1px;
content: " ";
width: 30%;
position: absolute;
left: 0;
top: 3rem;
}
.span-live:after {
right: 0;
left: auto;
} <div class="div-live">
<span class="span-live">پخش زنده</span>
</div>【讨论】：
没有伪元素，没有附加元素。只有单个 div：
我使用了一些 CSS 变量来轻松控制。
div {
--border-height: 2px;
--border-color: #000;
background: linear-gradient(var(--border-color),var(--border-color)) 0% 50%/ calc(50% - (var(--space) / 2)) var(--border-height),
linear-gradient(var(--border-color),var(--border-color)) 100% 50%/ calc(50% - (var(--space) / 2)) var(--border-height);
background-repeat:no-repeat;
text-align:center;
}<div style="--space: 100px">Title</div>
<div style="--space: 50px;--border-color: red;--border-height:1px;">Title</div>
<div style="--space: 150px;--border-color: green;">Longer Text</div>但上述方法不是动态的。您必须根据文本长度更改--space 变量。
【讨论】：
我选择了一种更简单的方法：
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;
}
结果
【讨论】：
如果您将 React 与样式化组件一起使用。我发现分离元素更容易。不是“惊人的解决方案”，但它确实有效。
import React from 'react';
import styled from "@emotion/styled";
const Container = styled.div`
padding-top: 210px;
padding-left: 50px;
display: inline-flex;
`
const Title1 = styled.div`
position: absolute;
font-size: 25px;
left:40px;
color: white;
margin-top: -17px;
padding-left: 40px;
`
const Title2 = styled.div`
position: absolute;
font-size: 25px;
left:1090px;
color: white;
margin-top: -17px;
padding-left: 40px;
`
const Line1 = styled.div`
width: 20px;
border: solid darkgray 1px;
margin-right: 90px;
`
const Line2 = styled.div`
width: 810px;
border: solid darkgray 1px;
margin-right: 126px;
`
const Line3 = styled.div`
width: 178px;
border: solid darkgray 1px;
`
const Titulos = () => {
return (
<Container>
<Line1/>
<Title1>
FEATURED
</Title1>
<Line2/>
<Line1/>
<Title2>
EXCLUSIVE
</Title2>
<Line3/>
</Container>
);
};
export default Titulos;
结果：
【讨论】：
这可能超出了这个问题，但我相信这确实可以帮助其他有类似问题的人。
如果您需要多个单元格并且不想明确指定背景颜色，则必须对行的每个部分使用标记。
这允许您使用完整的 flex line 将元素定位在任何位置，并且对于例如扩展器
.title-hr {
width: 100%;
vertical-align: middle;
align-items: center;
text-align: start;
display: flex;
}
.title-hr>span {
padding: 0 0.4em;
}
.title-hr>.hr {
border-bottom: 1px solid #777;
line-height: 0.1em;
margin: 0.34em 0 0.35em;
flex: 1 1 auto;
}
.title-hr>.hr.fix {
flex: 0 1 auto;
}<div class="title-hr">
<span>+</span>
<span class="hr fix"></span>
<span>Title</span>
<span class="hr"></span>
</div>【讨论】：
具有透明度的元素动态解决方案：
h2 {
display:table; /* fit content width*/
margin:20px auto; /* center*/
padding:0 10px; /* control the space between the text and the line */
box-shadow:0 0 0 100px red; /* control the line length and color here */
--s:2px; /* control the line thickness*/
clip-path:
polygon(0 0,100% 0,
99% calc(50% - var(--s)/2),
200vmax calc(50% - var(--s)/2),
200vmax calc(50% + var(--s)/2),
99% calc(50% + var(--s)/2),
100% 100%,0 100%,
1px calc(50% + var(--s)/2),
-200vmax calc(50% + var(--s)/2),
-200vmax calc(50% - var(--s)/2),
1px calc(50% - var(--s)/2));
}
body {
background: pink;
}<h2>a Title here </h2>
<h2 style="box-shadow:0 0 0 100vmax blue;">Title</h2>
<h2 style="box-shadow:0 0 0 200px green;--s:5px">Another title Title</h2>【讨论】：
使用官方position utilities 没有自定义 CSS 的纯 Bootstrap 5 解决方案：
<div class="position-relative my-4">
<hr />
<small class="position-absolute top-50 start-50 translate-middle bg-white px-3 text-muted">
my title here
</small>
</div>
记住要根据父DOM元素的背景颜色调整CSS类bg-white。
【讨论】：