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

Question

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

标题的文字可以改变:

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

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

<h1>Today</h1>

Answer 1

您可以使用2个伪元素和边框在标题的两边创建一条线:

• 这适用于透明背景(线条和标题具有透明背景).
• 线条长度将适应标题宽度,因此无论标题长度如何,它们始终在同一位置开始和结束.
• 标题可以跨越几行,而左右行保持垂直居中(请注意,您需要将标题包装在<span>标签中才能使其工作.请参阅演示)

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

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

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伪元素.否则,也可以使用伪元素来实现相同的目的.}

这种方法的缺点是浏览器支持此功能,目前该功能非常低.您可能还采取了在我的答案详细一些特定浏览器定制这里是与此类似.

目前,这并没有给出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>