导航栏中的徽标垂直对齐不起作用

Question

我正在尝试将“徽标”与导航栏垂直对齐。我希望它在正常状态和折叠状态下居中。我尝试了一些可能的解决方案，但到目前为止似乎没有任何效果。我尝试添加不同的头寸类型，例如，我尝试使用保证金顶部和底部 50%。可能有一个非常简单的方法来实现这一切。https://jsfiddle.net/qb0dj3yp/90/提前致谢！//header Effekt beim scrollen$(function() {  var shrinkHeader = 100;  $(window).scroll(function() {    var scroll = getCurrentScroll();    if (scroll >= shrinkHeader) {      $('#navbar').addClass('shrink');    } else {      $('#navbar').removeClass('shrink');    }  });  function getCurrentScroll() {    return window.pageYOffset || document.documentElement.scrollTop;  }});// JavaScript Document$(document).ready(function() {  var navTop = $('#navbar').offset().top;  var navHeight = $('#navbar').height();  var windowH = $(window).height();  $('.section').height(windowH);  $(document).scroll(function() {    var st = $(this).scrollTop();    //for the nav bar:    if (st > navTop) {      $('#navbar').addClass('fix');      $('.section:eq(0)').css({        'margin-top': navHeight      }); //fix  scrolling issue due to the fix nav bar    } else {      $('#navbar').removeClass('fix');      $('.section:eq(0)').css({        'margin-top': '0'      });    }    $('.section').each(function(index, element) {      if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {        $(this).addClass('active');        var id = $(this).attr('id');        $('a[href="#' + id + '"]').parent('li').addClass('active');        // or $('#nav li:eq('+index+')').addClass('active');      } else {        $(this).removeClass('active');        var id = $(this).attr('id');        $('a[href="#' + id + '"]').parent('li').removeClass('active');        //or $('#nav li:eq('+index+')').removeClass('active');      }    });  });});//

Answer 1

我调整了您的 JSFiddle 以display: flex使用align-items: center https://jsfiddle.net/xv29r1sm/

Answer 2

也许这就是你想要的

在 css 部分中，搜索#navbar.shrink img。

从那里删除这一行： margin-top: -30px;

或者像这样评论它： /* margin-top: -30px; */

现在它应该垂直居中。那是因为 margin-top 属性会将图像进一步拖动到顶部，这在您的情况下是不需要的。

    //header Effekt beim scrollen

$(function() {

  var shrinkHeader = 100;

  $(window).scroll(function() {

    var scroll = getCurrentScroll();

    if (scroll >= shrinkHeader) {

      $('#navbar').addClass('shrink');

    } else {

      $('#navbar').removeClass('shrink');

    }

  });

  function getCurrentScroll() {

    return window.pageYOffset || document.documentElement.scrollTop;

  }

});

// JavaScript Document

$(document).ready(function() {

  var navTop = $('#navbar').offset().top;

  var navHeight = $('#navbar').height();

  var windowH = $(window).height();

  $('.section').height(windowH);

  $(document).scroll(function() {

    var st = $(this).scrollTop();

    //for the nav bar:

    if (st > navTop) {

      $('#navbar').addClass('fix');

      $('.section:eq(0)').css({

        'margin-top': navHeight

      }); //fix  scrolling issue due to the fix nav bar

    } else {

      $('#navbar').removeClass('fix');

      $('.section:eq(0)').css({

        'margin-top': '0'

      });

    }

    $('.section').each(function(index, element) {

      if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {

        $(this).addClass('active');

        var id = $(this).attr('id');

        $('a[href="#' + id + '"]').parent('li').addClass('active');

        // or $('#nav li:eq('+index+')').addClass('active');

      } else {

        $(this).removeClass('active');

        var id = $(this).attr('id');

        $('a[href="#' + id + '"]').parent('li').removeClass('active');

        //or $('#nav li:eq('+index+')').removeClass('active');

      }

    });

  });

});

//

    @charset "utf-8";

/* CSS Document */

* {

  font-family: 'Roboto', sans-serif;

}

#container {

  width: 1280px;

  height: 100%;

  margin-left: auto;

  margin-right: auto;

}

body {

  background-color: grey;

  margin: 128px 0 0 0;

}

/* Navigation */

#navlinks {

  margin: 0;

}

ul {

  color: black;

  list-style: none;

  float: right;

  margin-right: 20px;

  padding-top: 30px;

}

ul li {

  display: inline-table;

  margin-left: 5px;

  padding: 5px;

  border-bottom: 1.5px solid;

  border-bottom-color: white;

}

ul li a {

  color: black;

  text-decoration: none;

  padding: 10px;

}

#logo {

  height: 128px;

  vertical-align: middle;

}

/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */

#navbar.fix {

  position: fixed;

  top: 0;

}

#navbar li.active {

  border-bottom: 1.5px solid;

  border-bottom-color: #f6bd60;

}

/* Smart Navbar Ende */

/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */

#navbar {

  border-bottom-style: solid;

  border-bottom-width: 1.25px;

  box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);

  background-color: white;

  height: 128px;

  transition: 0.32s;

  position: fixed;

  top: 0;

  width: 1280px;

}

#navbar.shrink {

  height: 80px;

  line-height: 18px;

}

#navbar li {

  font-size: 1.2rem;

  font-weight: normal;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

}

#navbar.shrink li {

  font-size: 1.2rem;

  margin-top: -30px;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

}

#navbar img {

  height: 128px;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

}

#navbar.shrink img {

  height: 80px;

  /*margin-top: -30px;*/

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

}

/* fixed nav Ende */

/*

#spacer {

  height: 128px;

  border-bottom: 4px solid;

}

  margin-top: 0 !important;

*/

#Home {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -1;

  background-color: darkred;

  position: relative;

  top: -80px;

}

#UberUns {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -2;

  background-color: lightblue;

  position: relative;

  top: -80px;

}

#Aktionen {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -3;

  background-color: blue;

  position: relative;

  top: -80px;

}

#Terminvereinbarung {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -4;

  background-color: red;

  position: relative;

  top: -80px;

}

#Infos {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -5;

  background-color: yellow;

  position: relative;

  top: -80px;

}

/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */

.hvr-sweep-to-top {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: perspective(1px) translateZ(0);

  transform: perspective(1px) translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  position: relative;

  -webkit-transition-property: color;

  transition-property: color;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

}

.hvr-sweep-to-top:before {

  content: "";

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #f6bd60;

  -webkit-transform: scaleY(0);

  transform: scaleY(0);

  -webkit-transform-origin: 50% 100%;

  transform-origin: 50% 100%;

  -webkit-transition-property: transform;

  transition-property: transform;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

  -webkit-transition-timing-function: ease-out;

  transition-timing-function: ease-out;

}

.hvr-sweep-to-top:hover,

.hvr-sweep-to-top:focus,

.hvr-sweep-to-top:active {

  color: white;

}

.hvr-sweep-to-top:hover:before,

.hvr-sweep-to-top:focus:before,

.hvr-sweep-to-top:active:before {

  -webkit-transform: scaleY(1);

  transform: scaleY(1);

}

/* Hover Effekt Ende */

/* Loader */

.loader {

  display: inline-block;

  width: 30px;

  height: 30px;

  position: relative;

  border: 4px solid #Fff;

  animation: loader 2s infinite ease;

}

.loader-inner {

  vertical-align: top;

  display: inline-block;

  width: 100%;

  background-color: #fff;

  animation: loader-inner 2s infinite ease-in;

}

@keyframes loader {

  0% {

    transform: rotate(0deg);

  }

  25% {

    transform: rotate(180deg);

  }

  50% {

    transform: rotate(180deg);

  }

  75% {

    transform: rotate(360deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

@keyframes loader-inner {

  0% {

    height: 0%;

  }

  25% {

    height: 0%;

  }

  50% {

    height: 100%;

  }

  75% {

    height: 100%;

  }

  100% {

    height: 0%;

  }

}

.loader-wrapper {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: #242f3f;

  display: flex;

  align-items: center;

  justify-content: center;

}

/* loader Ende */

<!DOCTYPE html>

<html>

  <head>

    <title>OptikTack</title>

    <link href="style.css" rel="stylesheet" type="text/css">

    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

  </head>

  <body>

    <div id="container">

      <div class="body">

      <!-- Navigation -->

        <nav id="navbar">

          <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

          <script src="javascript/navbar fixed.js"></script>

          <a href="#Home" id="logo"><img src="https://www.w3schools.com/images/lamp.jpg"></a>

          <ul>

            <li class="hvr-sweep-to-top active"><a href="#Home">Home</a></li>

            <li class="hvr-sweep-to-top"><a href="#UberUns">Wir über uns</a></li>

            <li class="hvr-sweep-to-top"><a href="#Aktionen">Aktionen</a></li>

            <li class="hvr-sweep-to-top"><a href="#Terminvereinbarung">Terminvereinbarung</a></li>

            <li class="hvr-sweep-to-top"><a href="#Infos">Infos</a></li>

          </ul>

        </nav>

        <!-- body -->

        <div id="spacer"></div>

        <!-- home section -->

        <section id="Home" class="section">

          <div>

          </div>

        </section>

        <!-- UberUns section -->

        <section id="UberUns" class="section">

          <div>

            <p>section 2</p>

          </div>

        </section>

        <!-- Aktionen section -->

        <div id="reference"></div>

        <section id="Aktionen" class="section">

          <div>

            <p>section 3</p>

          </div>

        </section>

        <!-- Terminvereinbarung section -->

        <section id="Terminvereinbarung" class="section">

          <div>

            <p>section 4</p>

          </div>

        </section>

        <!-- Infos section -->

        <section id="Infos" class="section">

          <div>

            <p>section 5</p>

          </div>

        </section>

      </div>

    </div>

    <div class="loader-wrapper">

      <span class="loader"><span class="loader-inner"></span></span>

    </div>

    <script>

      $(window).on("load", function() {

        $(".loader-wrapper").fadeOut("slow");

      });

    </script>

    <script>

      $('a').click(function() {

        $('html, body').animate({

          scrollTop: $($(this).attr('href')).offset().top

        }, 500);

        return false;

      });

    </script>

  </body>

</html>

Answer 3

margin: auto是你的朋友吗？将其应用于子 div。另请检查弹性盒的用法