Question

我正在为我的网站创建一个登陆页面，并希望其中一个Jumbotrons给它一种现代和技术感觉。我已经成功地（水平和垂直）居中我的文字，现在我正在移动到背景图像上。我遇到了一个问题，因为我需要将Div作为背景图像的高度，而文本仍在中心。这是我的HTML

<div class="jumbo">
  <div class="jumboCon">
    <h1 class="centre">Kraft, unique</h1>
    <p>The best present is a special one</p>
    <div class="action">
      <p>Search!</p>
    </div>
  </div>
</div>

这是我的CSS

.jumbo {
    width: 100%;
    background-image: url(../img/kraft.png);
}


.jumboCon {
    width: 50%;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #fcfcfc;
}

我已经阅读了几个问题和答案，one他们建议只将图像放入Div中，但我不能这样做，因为我的文本也需要在那里居中。让它变得更难我不会总是知道图像的尺寸，因为这将是人们宣传他们自己的照片。

我想要这种效果as seen here on Ghost。我对JavaScript不太有天赋，但可以复制和粘贴！感谢

尼克

Answer 1

我用这篇方便的文章来帮助我写这个：http://css-tricks.com/centering-in-the-unknown/。它使用:before之类的伪元素来避免向页面添加额外的标记。

我将#jumbo更改为position: absolute;的宽度和高度，然后我使用文章的代码将元素居中。

.jumbo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/kraft.png);
    text-align: center;
}

.jumbo:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.jumboCon {
    display: inline-block;
    width: 50%;
    margin: 0 auto;
    color: #fcfcfc;
}

Answer 2

从我的评论中，如果图片具有已知比率。

的想法是将框和图像设置为相同的比例。然后调整图像大小，使其背景大小为100％宽度。

以％为单位的垂直填充的伪元素将拉伸框以适合比率。

使用浮动伪，您可以将文字居中： DEMO

使用内联块伪，您可以居中和垂直对齐内容： DEMO

/* center & middle */
.jumbo {
  margin:auto;
  overflow:hidden;
  background:url(http://lorempixel.com/640/480/) no-repeat red;
  background-size:100% auto;
  text-align:center;
}
.jumbo:before {
  content:'';
  padding-top:75%;/* because ratio is 4:3 */
}
.jumbo:before , .jumboCon {
  display:inline-block;
  vertical-align:middle;
}

注意：图像会保持比例，框可以长高，屏幕或窗口比例可能不匹配。

Answer 3

您还可以使用img元素，并设置div的大小。然后，内容内容div可以有position:absolute和text-align:center，它可以按照您的意愿工作。作为背景的完整图像，以及前面居中的div。

这是一个例子：http://jsfiddle.net/T5M8B/

修改

再添加两个带有display:table效果的div，使其垂直居中。 http://jsfiddle.net/T5M8B/1/

如何在仍然在文本中心的情况下根据背景图像动态更改DIV的高度

3 个答案: