中间带有单词的水平线的CSS技术

我正在尝试在中间添加一些文本的水平尺。例如：

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

有没有办法在CSS中做到这一点？没有所有“-”的破折号很明显。

这大致就是我要做的：通过border-bottom在containing上设置a ，h2然后再给h2a small 来创建该行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/

在尝试了不同的解决方案之后，我提供了一种适用于不同文本宽度，任何可能的背景并且没有添加额外标记的有效方法。

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/

好的，这个比较复杂，但是除了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％）非常取决于内部文本的宽度。.必须考虑解决方案。至少，top: 1.2em即使您使用不同的字体大小，也要确保这些行或多或少地停留在文本的中心。

它似乎确实运作良好：http：//jsfiddle.net/tUGrf/3/

最短和最佳方法：

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

<span> your text </span>

这是基于Flex的解决方案。

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

<h1>Today</h1>

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

对于以后的（当今）浏览器，display:flexandd 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>

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

我一直在寻找这种简单装饰的一些解决方案，我发现了很多解决方案，有些奇怪，有些甚至使用JS来计算字体和bla，bla，bla的高度，然后我阅读了一个对这个职位和读取评论thirtydot谈论 fieldset和legend我认为这是它。

我覆盖了这两种元素样式，我想您可以为它们复制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;
}

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样式。

对我来说，这些限制胜过我在大多数实现的答案开头提到的“问题”。

这使行的长度固定，但是效果很好。行的长度是通过加或取'\ 00a0'（unicode空间）来控制的。

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

<h1>side lines</h1>

如果有人想知道如何设置标题，使其与左侧保持固定距离（而不是如上所示居中），我可以通过修改@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;
}

没有击败老手，但我一直在寻找解决方案，最终落到这里，对自己的选择感到不满意，尤其是由于某些原因，我无法在此处获得提供的解决方案以使其对我有效。（可能是由于我自己的错误造成的。。。）但是我一直在玩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/

万一有人愿意，恕我直言，使用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，将使他们平均占用最空闲的空间，同时保持内容居中。

希望这可以帮助！

我不太确定，但是您可以尝试使用水平尺并将文本推到顶部边缘上方。您的段落标记和背景也需要固定的宽度。这有点hacky，我不知道它是否可以在所有浏览器上正常工作，并且您需要根据字体大小设置负边距。虽然适用于Chrome。

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

<hr><p>def</p>

我尝试了建议的大多数方法，但最终遇到了诸如全角或不适用于动态内容的问题。最后，我修改了代码，并完美运行。此示例代码将在此之前和之后绘制这些行，并且在内容更改方面非常灵活。中心也对齐。

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

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

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

这也在https://stackoverflow.com/a/57279326/6569224中得到了回答

• 创建的小图像1x18具有单个点的颜色＃e0e0e0
• 将图像转换为base64代码

结果：

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}

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