主页 / 问题 / 648348
Accepted
Alexandr_TT
Asked:2020-04-04 22:20:18 +0000 UTC2020-04-04 22:20:18 +0000 UTC

图片上方文字前后的线条

  • 772

我想在居中标题前后创建一行。线条和文本必须具有透明背景，以便能够将它们放置在不同的背景上。线的宽度不应超过 100%。

就像图片中的这里：

在此处输入图像描述

标题文本可能会更改：

  • 标题宽度未知
  • 标题可以跨多行 

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


 <h1>Today</h1>

@JUO对 title over image 问题之前和之后的行进行了 松散的翻译。

html

3 个回答

  1. Best Answer

    非标准解决方案））：

    fieldset {
    border-left: none;
    border-right: none;
    border-bottom: none;
    text-align: center;
}
      <fieldset>
    <legend>Lorem ipsum.</legend>
  </fieldset>

    更多标准：

    header {
  text-align: center;
  overflow: hidden;
}

h1 {
  display: inline-block;
  position: relative;
}

h1:before,
h1:after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  background: #000;
}

h1:before {
  right: 100%;
  left: -1000%;
}

h1:after {
  left: 100%;
  right: -1000%;
}
    <section>
  <header>
    <h1>
      Lorem ipsum.
    </h1>
  </header>
</section>

    前任，前任

    • 17

  2. 你可以用 2 个伪元素和一个边框在标题的两边画一条线：

    • 这适用于transparent background（线条和标题具有透明背景）。
    • 行的长度适应标题的宽度，因此无论标题的长度如何，它们始终以相同的空格开始和结束。
    • 标题可以跨越多行，而左右行保持垂直居中（请注意，您需要用标签包裹标题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>

    @andweb-tiki翻译图像标题前后的 线条。

    • 11

  3. 这是另一种使用 flexbox 显示的方法。该属性flex-grow确定当元素的总大小小于容器大小时应如何在元素之间分配可用空间。
    默认情况下，描述字符串的元素width是空的，没有内容（即大部分是空的，不占用空间）。但是，应用于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伪元素。否则，同样可以使用伪元素来实现。

    这种方法的缺点是浏览器对此功能的支持相当低。

    您可能还需要调整一些浏览器设置，我在这里的回答中对此进行了详细说明，与此类似。

    This currently doesn't provide anything beyond the answer @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>

    在此处输入图像描述

    @Harry在图像答案标题之前和之后对 Line的 松散翻译。

    • 11

相关问题