标题在图像之前和之后的行

Question

我想在居中的标题之前和之后创建行。线条和文字必须具有透明背景才能将它们放置在不平坦的背景上。该行不得为100％宽度，如下所示：

标题的文字可以改变：

• 标题的宽度未知
• 标题可以跨越几行

h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}

<h1>Today</h1>

Answer 1

你可以在标题的两边加上一行，包含2个伪元素和边框：

• 这适用于透明背景（线条和标题具有透明背景）。
• 线条长度将适应标题宽度，因此无论标题长度如何，它们始终在同一位置开始和结束。
• 标题可以跨越多行，而左右行保持垂直居中（请注意，您需要将标题包装在<span>标记中才能使其生效。见演示）

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是使用flexbox显示的另一种方法。 flex-grow属性指定当元素的总大小小于容器大小时，如何在元素之间分配可用空间。

默认情况下，在生成行的元素上没有指定width，它们没有content（意味着它们基本上是空的并且不占用空间）。但是，这些元素的flex-grow设置会使剩余空间（容器的总空间 - 文本的空间）在它们之间平均分配。这使得它看起来好像该行从一端到另一端，除了文本的位置。

内容两侧的实线：

在下面的代码段中，使用从上到下的渐变来产生在内容两侧都有实线的效果。

h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}

/* Just for demo*/
body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading'>Something broader</h3>
<h3 class='heading'>Something broader and broader</h3>
<h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3>

<!-- IE11 specific version -->

<h3 class='heading-ie'>
  <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements -->
  Something broader and broader and broader
  <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

内容两侧的渐变效果线：

在下面的代码片段中，使用从左到右的渐变渐变来产生一条线的效果，该线从内容附近的纯色变为另一侧的透明色。

h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}
.heading:before, .heading-ie span.before{
  background-image: linear-gradient(to right, transparent, white);
}
.heading:after, .heading-ie span.after{
  background-image: linear-gradient(to left, transparent, white);
}

/* Just for demo*/
body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading'>Something broader</h3>
<h3 class='heading'>Something broader and broader</h3>
<h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3>

<!-- IE11 specific version -->

<h3 class='heading-ie'>
  <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements -->
  Something broader and broader and broader
  <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

^{注意：在该片段中，我为行使用了额外的span元素，因为IE11似乎不支持伪元素上的flex-grow。否则，使用伪元素也可以实现相同的目的。}

此方法的

缺点<缺点>是浏览器对此功能的支持，此功能目前相当低。您可能还必须采用一些特定于浏览器的自定义，这些自定义在我的回答here中详细说明，与此类似。

目前，这并没有给出web-tiki的答案，但这只是另一种可能的选择。这种方法在以下：

的情况下会更有帮助

h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading-ie .start, .heading-ie .middle, .heading-ie .end{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-position: 0% 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}

/* Order specifies the order in which the elements should be presen within container */

.content-1{
  order: 2;
}
.start{
  order: 1;
}
.middle{
  order: 3;
}
.content-2{
  order: 4;
}
.end{
  order: 5;
}

/* Just for demo*/

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h3 class='heading-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text here</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

<h3 class='heading-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text with <br/> line break</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here with <br/> line break too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>