CSS 跨度强制页面变宽它应该是

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

您可以将 #title-display 元素定位在 50%、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>

CSS 跨度强制页面变宽它应该是

CSS Span forcing page to be wider it should be

css

frontend