I recently started learning HTML, CSS, JavaScript, and jQuery from this set of books .
I tried every obvious answer that I could dig into Stack Overflow to do what is usually the simple task of centering a div on a page. There is an overlay on my page, which I suspect is part of my problem. I am working to adapt CodePen to my project. In this CodePen, only one element, the H1 tag, needs to be centered on the page, and it works great.
On my page, I replace the h1 tag with a div. I included a jsFiddle link with comments re: what I was trying to do. I know that I am missing something very simple, but I can’t understand what it is.
Thanks for reading, and I welcome your suggestions for this front-end noob.
Below is my problematic code:
<!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");
});