CSS跨度強制頁面應該更寬應該是

Question

錯誤特別在於跨度元素的寬度爲900像素，並且由於它在較小的屏幕尺寸範圍內延伸，因此它迫使頁面水平滾動。我嘗試使用overflow：hidden屬性，但不會停止滾動。

我需要900像素的原因是我的文字和邊框居中，我的邊框不分爲兩部分。另外，該文本位於圖像的旋轉木馬滑塊上方。錯誤看起來這樣：

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

你可以在50％的#title-display元素位置，50％則使用transform: translate(-50%, -50%)一半的寬度和高度，以抵消它，無論它的實際大小。像這樣。

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>