Question

具体的错误是span元素的宽度为900像素，它会强制页面水平滚动，因为它在较小的屏幕尺寸下延伸到目前为止。我尝试使用overflow：hidden属性，但这并没有停止滚动。

我需要900像素的原因是我的文字和边框居中，我的边框不会分成两部分。此外，此文本位于图像的旋转木马滑块上。错误看起来像这样：

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

我的目标是裁剪元素过度扩展的页面宽度。这是我的代码：

`

#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

您可以将result2元素定位在50％，50％，然后使用#title-display将其宽度和高度的一半偏移，而不管其实际大小。像这样。

＆＃13;

transform: translate(-50%, -50%)

＆＃13;

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;
}

＆＃13;

CSS跨越强制页面应该更宽

1 个答案: