-1
CSSとHTMLの両方でセンターツールを使用すると、画像が中央に表示されません。誰かが何をすればいいのか知っていれば、左上隅に近づく傾向があります。また、私は私が中心に希望の私の要素を中心に干渉しているので、多分垂直ナビゲーションバー上のビデオチュートリアル画像を中心にすることはできません
body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
.logo{
float: right;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #000000;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
font-size: 35px;
text-decoration: none;
color: #000000;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #ffffff
padding: 10px 0;
margin: 35px;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: inherit;
}
active-nav .content {
transform: translate3d(200px, 0, 0);
}
video {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}<doctype.html>
<head>
<title> LAP Aerial Photography </title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="overlay">
<header>
<nav>
<a href="#" class="nav-toggle-btn"><i class="fa fa-bars" aria-hidden="true"></i></a>
<ul>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>About</a></li>
<li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>Contact</a></li>
<li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>Pricing</a></li>
<li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>Gallary</a></li>
</ul>
</nav>
<div class="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</div>
</header>
</div>
<video autoplay="true" loop="true">
<source src="Background.mov" type="video/mov">
<source src="Background.webm" type="video/webm">
</video>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();
</script>
</body>
</html>
あなたのDOCTYPE宣言が正しくありません。 '<！DOCTYPE html>' – Rob