通过CSS网格进行救援

Question

我正在尝试制作一个水平规则，中间有一些文字。例如：

-----------------------------------我的头衔--------- --------------------

有没有办法在CSS中做到这一点？没有所有“ - ”破灭显然。

Answer 1

这大致是我的做法：通过在包含border-bottom上设置h2然后为h2设置较小的line-height来创建该行。然后将文本放入具有非透明背景的嵌套span中。

HTML：

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

CSS：

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

我仅在Chrome中测试过，但没有理由不在其他浏览器中使用。

JSFiddle：http://jsfiddle.net/7jGHS/

Answer 2

在尝试不同的解决方案之后，我得到了一个有效的不同文本宽度，任何可能的背景，并且没有添加额外的标记。

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/

Answer 3

好的，这个更复杂，但除了IE＆lt; 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％）非常依赖于文本内部的宽度..必须考虑解决方案。至少top: 1.2em确保线条或多或少保持在文本的中心，即使您有不同的字体大小。

虽然看起来效果很好：http://jsfiddle.net/tUGrf/3/

Answer 4

又一种方法：

＆＃13;

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

＆＃13;

<span> your text </span>

＆＃13;

Answer 5

这是基于Flex的解决方案。

HTML：

<h1>Today</h1>

CSS：

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}

JSFiddle：https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

Answer 6

对于以后（今天）的浏览器，display:flex和pseudo-elements可以轻松绘制。 border-style，box-shadow甚至background也有助于化妆。

＆＃13;

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 */
}

＆＃13;

<h1>side lines via flex</h1>

＆＃13;

Answer 7

.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>

Answer 8

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

为跨度填充以在文本和行之间留出更多空间。

示例：http://jsfiddle.net/tUGrf/

Answer 9

我一直在寻找这种简单装饰的解决方案，我发现了很多，有些奇怪，有些甚至用JS来计算字体的高度和bla，bla，bla ，然后我已经阅读了这篇文章中的那篇并阅读了来自 thirtydot 的评论{1}}和fieldset，我认为就是这样。

我覆盖了这两种元素样式，我猜你可以为它们复制W3C标准并将其包含在你的legend课程中（或任何你想称之为的）但这就是我所做的：

.middle-line-text

这里是小提琴：http://jsfiddle.net/legnaleama/3t7wjpa2/

我玩过边框样式，它也适用于Android;）（在kitkat 4.XX上测试）

编辑：

根据Bekerov Artur的想法，这也是一个不错的选择，我已经改变.png base64图像用.SVG创建笔画，这样你就可以以任何分辨率渲染并改变颜色没有任何其他软件的元素：）

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

Answer 10

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元素上，以调整文字大小。

<强>限制：

没有多行文字。仅限单行。
HTML标记不那么优雅

top

.line属性需要是line-height的一半。因此，如果line-height为1.5em，则top应为-.75em。这是一个限制，因为它不是自动化的，如果您在具有不同行高的元素上应用这些样式，那么您可能需要重新应用line-height样式。

对我来说，这些限制超过了我在大多数实施的答案开始时提到的“问题”。

Answer 11

这为您提供了静态线宽，但效果很好。通过添加或取'\ 00a0'（一个unicode空格）来控制线宽。

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

Answer 12

从许多替代方案中我更喜欢this answer，因为它跨越了当今的浏览器。

我使用的不止一个 homepage 。建议 only have a single <h1> ，特别是在主页上。因此，有必要将h1更改为h2或更高。

h2 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h2:before, h2: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 */
}

<h2>side lines via flex</h2>

Answer 13

通过CSS网格进行救援

类似于上述flex的答案，也可以使用CSS Grids完成。这给您提供了更大的范围来抵消标题，并提供了一种更简单的方法来扩大行（使用grid-template-columns）和内容（使用grid-gap）之间的距离。

与flex方法相比，此方法的优点是易于偏移行，并且仅需要在列之间添加一次间隙（对于:before和{{1而言，不必两次） }}伪元素）。从语法上讲，它也更简洁，更明显。

:after

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

Answer 14

我采用了一种更简单的方法：

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

结果

Answer 15

如果您将 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;

结果：

Answer 16

我使用表格布局动态填充边和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;
}

Answer 17

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

这会对你有所帮助

在线之间

Answer 18

如果有人想知道如何设置标题使其与左侧的距离固定（并且没有如上所示居中），我通过修改@ 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。

Answer 19

这可能有点超出了问题的范围，但我相信这确实可以帮助其他遇到类似问题的人。

如果您需要多个单元格并且不想明确指定背景颜色，则必须对行的每一部分都使用标记。

这允许您使用完整的弹性线将元素定位在任何位置并且对于例如有用的扩展器

.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>

Answer 20

没有伪元素，没有其他元素。仅单个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变量。

Answer 21

此代码将正常工作：

/* پخش زنده*/
  .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>

Answer 22

   <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 的回答

Answer 23

具有透明度的单元素动态解决方案：

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>

Answer 24

只要有人愿意，恕我直言，使用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容器中将它们设置为1,3，同时将内容设置为order 2（在中间）。将之前/之后的数字增加1，将使他们平均占用最空闲的空间，同时保持内容居中。

希望这会有所帮助！

Answer 25

水平和垂直行，中间带有单词

.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

中也会回答

Answer 26

使用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>

Answer 27

对我来说，这种解决方案效果很好...

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

Answer 28

不要打败死马，但我正在寻找一个解决方案，最终来到这里，并且我对这些选项不满意，尤其是出于某种原因，我无法在此处获得所提供的解决方案对我有用。（可能是由于我的错误...）但我一直在玩flexbox，这是我为自己工作的一些东西。

某些设置是硬连线的，但仅用于演示目的。我认为这个解决方案应该适用于任何现代浏览器。只需删除/调整.flex-parent类的固定设置，调整颜色/文本/内容，并且（我希望）您会像我一样快乐。

HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

我还在这里保存了我的解决方案： https://jsfiddle.net/Wellspring/wupj1y1a/1/

Answer 29

我已经尝试了大多数建议的方法，但最终会遇到一些问题，如全宽或不适合动态内容。最后我修改了一个代码，并且完美地工作。此示例代码将在之前和之后绘制这些行，并且内容更改灵活。中心对齐了。

<强> 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/

Answer 30

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

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

<hr><p>def</p>

Answer 31

创建的单个图像1x18，其单个点的颜色为＃e0e0e0
将图像转换为base64代码

结果：

<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>

shaving 150  
shaving 200  
coffee 100  
food 350  
transport 60  
transport 40

CSS技术用于水平线，中间有单词

31 个答案:

通过CSS网格进行救援