当我在 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>最佳答案
关注这个Guide !它解释得很好而且很清楚。
编辑:
我使用 CSS 转换使图像居中，因为旧浏览器不支持 flexbox:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
希望以下代码对您有所帮助。
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
#logo > img {
/* center image */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* nav */
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);
}<!DOCTYPE html>
<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>
<header>
<nav>
<a href="#" class="nav-toggle-btn"><i class="fa fa-bars" aria-hidden></i></a>
<ul>
<li><a href="#"><i class="fa fa-home" aria-hidden></i>Home</a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden></i>About</a></li>
<li><a href="#"><i class="fa fa-phone" aria-hidden></i>Contact</a></li>
<li><a href="#"><i class="fa fa-money" aria-hidden></i>Pricing</a></li>
<li><a href="#"><i class="fa fa-picture-o" aria-hidden></i>Gallary</a></li>
</ul>
</nav>
<div id="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>关于javascript - 无法居中图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47481789/