web-dev-qa-db-ja.com

画像上のタイトルの前後の行

中央揃えのタイトルの前後の行を作成します。不均等な背景に配置できるようにするには、行とテキストに透明な背景が必要です。次のように、線の幅を100％にすることはできません。

Centered text with line before and after over an image

タイトルのテキストは変更できます：

  • タイトルの幅がわからない
  • タイトルは複数の行にまたがることができます
h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}
<h1>Today</h1>
csscss3css-shapes
35
JUO

タイトルの両側の線を2つの擬似要素と境界線で作成できます：

  • これは透明な背景（ラインとタイトルに透明な背景があります）で機能します。
  • 行の長さはタイトルの幅に適応するため、タイトルの長さに関係なく常に同じ位置で開始および終了します。
  • タイトルは複数の行にまたがるで、左右の行は垂直方向の中央に留まります（タイトルは<span>タグで囲む必要があることに注意してくださいこれは機能します。demoを参照してください）

Title with line before and after over an image

@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>
53
web-tiki

flexbox display。を使用する別のアプローチです。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>

enter image description here

コンテンツの両側にグラデーション効果のある線：

以下のスニペットでは、細い左から右へのグラデーションを使用して、コンテンツの近くの単色から反対側の透明な線の効果を生成しています。

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>

enter image description here

注：スニペットでは、IE11がflex-growをサポートしていないため、余分なspan要素を行に使用しました。擬似要素上。それ以外の場合は、擬似要素でも同じことが実現できます。

このアプローチの欠点は、この機能に対するブラウザのサポートであり、現時点ではかなり低いです。また、私の答えで詳細に説明されているブラウザ固有のカスタマイズを採用する必要があります 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>

enter image description here

15
Harry