个人中心
gpt4 book ai didi

javascript - 无法居中图片

转载 作者：行者123 更新时间：2023-11-28 17:08:58 25 4
gpt4 key购买 nike

当我在 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/

25 4 0
文章推荐： python - 如何使用 PyQtGraph 的 DateAxisItem？
文章推荐： javascript - 跳转到下一个非禁用单选按钮
文章推荐： python - Odoo中如何继承一个纯Python类来修改一个方法？
文章推荐： javascript - 在 Javascript 中突出显示单词 - 为什么在页面完全加载后它们不会保持突出显示？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com