Question

我添加了一个全宽＆amp;高度背景图像与垂直＆amp;水平居中的文本到我正在处理的网站。我已经在某种程度上实现了这一点，但是我的文本被限制在一定的宽度而我无法解决原因。最后，我想包括基金会行和＆amp;在我的解决方案中大12列，文本跨越列的宽度，而不是浓缩到它当前的683px。任何有关这方面的建议和指导都将非常感谢。

HTML：

<div class="fullscreen-cont">
  <div class="fullscreen-img"></div>
  <div class="content xy-center">
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h2>
  </div>
</div>

SCSS：

.fullscreen-cont,
.fullscreen-img {
  display: block;
  position: relative;
  min-width: 100vw;
  min-height: 100vh;
}

.fullscreen-img {
  display: block;
  z-index: 1;
  min-width: 100vw;
  min-height: 100vh;
  // background position when .fullscreen-img overflows
  background:transparent url('http://24.media.tumblr.com/2cfbc3f3c40e18949afd5d5dadfa4664/tumblr_n381f5z8es1st5lhmo1_1280.jpg') center center no-repeat;
  background-size: cover;
}

.content {
  display: block;
  position: relative;
  z-index: 2;
  h2 {
    color: #fff;
    text-align: center;
  }
}

// Vertically and horizontally center text within a div
.xy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

目前：http://imgur.com/BCIAGZE

我希望使用row＆amp; amp的方式增加文本宽度如果可能，请使用背景图片的大12列：http://imgur.com/b27uT7m

Answer 1

将您的背景图片添加为

background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */

使用文本

width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;

Answer 2

所以我自己解决了这个问题。如果您有任何建议或在我的解决方案中看到任何缺陷，请随时指出它们。此外，该解决方案利用仅与现代浏览器兼容的视口单元。

HTML：

  <div class="hero-text">
      <div class="row">
        <div class="large-12 columns xy-center">
          <h1>Hi</h1>
          <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h2>
        </div>
      </div>
    </div>

CSS：

// Vertically and horizontally center text within a div
.xy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hero-text {
  width: 100%;
  height: 100%;
  background: url('http://25.media.tumblr.com/1adc4029ef3a31124f222add70fa3553/tumblr_n2k1499dIp1st5lhmo1_1280.jpg') center center no-repeat;
  background-size: cover;
  h1 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
  }
    h2 {
    color: #fff;
        text-align: center;
        text-transform: uppercase;
    }
}

全宽＆amp;高度背景图像与垂直＆amp; Foundation中的水平居中文本

2 个答案: