バックグラウンド画像の上にスパンの垂直線と水平線のテキストリンク

Question

私はこれを行う方法を探しましたが、私はこの特定の問題のテクニックを使用することができませんでした。申し訳ありませんが、それは明らかですが、私は初めてHTMLを使用しています。

これが関連する場合は、ページに背景画像があります。

以上、私は横に中央が透明な背景を持つ一連の3つのスパンで見出し（h1）を持っています。

（h2）と同じスタイルを使用したいと思いますが、水平方向に中央に配置したいのですが、とを縦にしてバックグラウンドを保ちます。 現時点では、ダミーの見出し（h2）を中央に追加し、（h3）の見出しを押し下げるのに本当に大きくなるようにすることができます。明らかに、これは理想的ではありません。センターにそれを植え付けるには何らかの方法が必要ですが、コードの配置が私を逃げさせます。

EDIT ...さらに、「ENTER」というテキストがリンクである必要があります。 :(

すべてのヘルプは本当にいただければ幸いです。おかげで。

これは、これはコードですfiddle
へのリンクです...

#container {text-align: center;} 

      .inner {display: inline-block; 
       position: relative;} 

     .overflow { 
      float: right; 
      color: #ffffff; 
      font: 100% "Arial Narrow", Arial; 
      font-weight: light; 
      font-style: italic; 
      letter-spacing: 2px; 
      background: rgb(0, 0, 0); /* fallback color */ 
      background: rgba(0, 0, 0, 0.3); 
      padding: 1px;} 

     .overflow2 { 
      float: right; 
      color: #ffffff; 
      font: 700% "Arial Narrow", Arial; 
      font-weight: light; 
      font-style: italic; 
      letter-spacing: 2px; 
      background: rgb(0, 0, 0); /* fallback color */ 
      background: rgba(0, 0, 0, 0.0); 
      padding: 100px;} 

     .overflow3 { 
      float: right; 
      color: #ffffff; 
      font: 265% "Arial Narrow", Arial; 
      font-weight: light; 
      font-style: italic; 
      letter-spacing: 5px; 
      background: rgb(0, 0, 0); /* fallback color */ 
      background: rgba(0, 0, 0, 0.3); 
      padding: 1px;} 

<h1> 
    <div id="container"> 
     <span class="inner"></span> 
     <span class="inner"><div class="overflow">&nbsp HeadingText nbsp</div></span> 
     <span class="inner"></span> 
    </div> 
</h1> 

<h2> 
    <div id="container"> 
     <span class="inner"></span> 
     <span class="inner"><div class="overflow2"></div></span> 
     <span class="inner"></span> 
    </div> 
</h2> 

<h3> 
    <div id="container"> 
     <span class="inner"></span> 
     <span class="inner"><div class="overflow3">&nbsp ENTER &nbsp</div></span> 
     <span class="inner"></span> 
    </div> 
</h3> 

Answer 1

あなたが垂直方向と水平方向の両方に何かをセンタリングすることができます相対配置された要素の内部に絶対配置を使用することによって実現できます。

position: absolute; 
top:50%; 
left:50%; 
-webkit-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%); 

あなたが中心に置いて欲しい要素にCSSのCSSを適用し、コンテナ要素（背景イメージ）のposition：relativeを使用します。

例：https://jsfiddle.net/94e8ezwn/1/

注：同じIDを持つ複数の要素を使用しないでください。 IDは要素に固有のものです。 #containerでは、代わりにクラスを使用します。