javascript – 将div放在带有叠加层的页面上

2019年7月21日 170次阅读

我最近开始从
this set of books开始学习HTML,CSS,JavaScript和jQuery.

我已经尝试了每一个明显的答案我可以在Stack Overflow上挖掘来做通常非常简单的任务,将div放在页面上.我的特定页面有一个叠加层,我怀疑这是我的问题的一部分.我正在努力使CodePen适应我的项目.在此CodePen中,只有一个元素H1标签需要在页面上居中并且工作正常.

在我的页面上,我正在用div替换h1标签.我已经包含了jsFiddle的链接,其中包含评论：我试图做的事情.我知道我错过了一些非常简单的东西,但我无法弄清楚它是什么.

感谢您阅读,我欢迎您对此前端菜鸟的建议.

以下是我有问题的代码：

<!DOCTYPE html>
<body>
    <header>
      <div class="hero" id="Portfolio">
        <div class="overlay"></div>
        <div class="page-subject">
                <!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
            <h1>Portfolio</h1>
            <div class="container space-around">
                <div><a href="#" class="hvr-pop"><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></a></div>
                <div><a href="#" class="hvr-pop"><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></a></div>
            </div>
        </div>
    </div>
</header>

html, body {
  height:100%;
  padding:0;
  margin:0;
  font-family: Raleway,sans-serif;
  color:#FFF;
}
header {
  height: calc(100% - 65px);
  background:#333;

  -webkit-perspective: 1500px;
  perspective: 1500px;
  perspective-origin: center bottom;
}

h1 {
  margin:0;
  vertical-align: middle;
  text-align:center;
  font-size:80px;
  font-weight:600;
  text-transform:none;
  text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}


.hero#Portfolio {
  position:relative;
  background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
  background-size:cover;
  height: 100%;
  width:100%;

  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  display:table;
}
.hero .overlay {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity:0;
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
    vertical-align: middle;
}

.container {
  display: flex;
}
.container.space-around {
    z-index: 10;
  justify-content: space-around;
  padding-bottom: 10px;
}

a {
    position: relative;
    z-index: 1;
}

a.hvr-pop img  {
    background: white;
    border-radius: 25px;
  display: block;
  min-width: 64px;
  max-width:128px;
  min-height: 64px;
  max-height:128px;
  width: auto;
  height: auto;
}


/* Pop */
@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

'use strict';
// This creates to folding animation
$(window).scroll(function() {
  var heroHeight = $('header').height();
  var yPosition = $(document).scrollTop();


  if (yPosition <= heroHeight) {
    var effectFactor = yPosition / heroHeight;
    var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
    $('.hero').css({
      '-webkit-transform': 'rotateX('+rotation+'rad)',
      'transform': 'rotateX('+rotation+'rad)',
    })
    .find('.overlay').css('opacity', effectFactor);
  }


  /**
   * Sticky nav-bar
   */
  if (yPosition <= heroHeight) {
    $('nav').removeClass('fixed');
  } else {
    $('nav').addClass('fixed');
  }

});

$(document).ready( function () {
    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
    $("nav ul a.current").removeClass("current");
    $("nav ul a[href='" + pathname  + "']").addClass("current");
});

最佳答案 只需添加：

div.page-subject {
    vertical-align: middle;
    display: table-cell;
}

这是Fiddle.

点赞