Question

当我在CSS和HTML中使用中心工具时，我的图像不会出现任何文本，如果有人有关于该做什么的想法请告诉我，它往往会保持靠近左上角。我也跟着一个垂直导航栏上的视频教程，所以这可能会干扰我想要居中的元素中心

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

关注此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>

无法居中图像

1 个答案: