CSSスパン強制ページの幅をより広くする

Question

特に、スパン要素の幅が900ピクセルであり、画面サイズを小さくするとページが横方向にスクロールされるというエラーが発生します。私はオーバーフロー：隠しプロパティを使用してみましたが、スクロールを停止しません。

なぜ私は900ピクセルが必要なのですか？私のテキストと境界線は中央にあり、境界線は2つの部分に分割されていません。さらに、このテキストはカルーセルスライダーの画像上にある。エラーのようなになります。

http://i.imgur.com/iAd16ml.png

私の目標は、要素がでoverextendsページの幅をトリミングすることです。これは私のコードです：

`

#title-display{ 
    vertical-align: middle; 
    text-align: center; 
    justify-content: center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -40px 0 0 -450px; 
} 
#title-display span{ 
    width: 900px; 
    float: left; 
    position: absolute; 
} 

#title-display h1 { 
    display: inline; 
    text-transform: uppercase; 
    border-width: 8px; 
    border-style: solid; 
    border-color: white; 
    padding: 10px; 
    color: white; 
    font-size: 4vw; 
} 

`

私が使用マージン：-40px 0 0 -450px。テキストを中央に配置します。ここで

は、ケース内の一部のHTMLです：

<div id="title-display"> 
       <span> 
        <h1><strong>Adrian's Workflow<strong></h1> 
        <p class="kicker">Designer // Programmer // Youtuber</p> 
       </span> 
      </div> 

Answer 1

あなたは関係なく、その実際のサイズの半分の幅と高さで、それを相殺するためにtransform: translate(-50%, -50%)を使用し、その後、50％で50％を#title-display要素を配置することができます。そのようです。

body {background:#666;} 
 
#title-display{ 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    text-align:center; 
 
} 
 

 
#title-display h1 { 
 
    text-transform: uppercase; 
 
    border-width: 8px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    padding: 10px; 
 
    color: white; 
 
    font-size: 4vw; 
 
    white-space: nowrap; 
 
}

<header id="title-display"> 
 
    <h1><strong>Adrian's Workflow</strong></h1> 
 
    <p class="kicker">Designer // Programmer // Youtuber</p> 
 
</header>