中心标题项无效

Question

一旦您将页面拉伸超过1100像素且超出max-width，我似乎无法将标题置于中心位置。

如何将标题保持居中？

＆＃13;

＆＃13;

$(document).ready(function() {
  var scroll_pos = 0;
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    if (scroll_pos > 580) {
      $(".normalmenuitem").css('color', '#a9a9a9');
      $(".normalmenuitem").css('padding-left', '13px');
      $(".normalmenuitem").css('padding-right', '13px');
    } else {
      $(".normalmenuitem").css('color', '#5f666f');
      $(".normalmenuitem").css('padding-left', '17px');
      $(".normalmenuitem").css('padding-right', '17px');
    }
  });
});

＆＃13;

@media screen and (max-width: 960px) {
  .normalmenuitem {
    display: none;
  }
}
.box {
  background-color: #fff;
  position: absolute;
  height: 59px;
  width: 100%;
  top: 0;
}
.navigationmenu {
  position: fixed;
  width: 100%;
  max-width: 1100px;
  z-index: 1000;
}
#logo {
  transform: translateY(-50%);
  position: absolute;
  top: 29px;
  left: 25px;
  width: 145px;
}
/* top right menu! */

.holderrr {
  position: absolute;
  top: 10px;
  right: 0px;
}
.rightmenu {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-family: nunito-semibold;
  font-size: 15px;
  padding: 6px 17px 6px 17px;
}
.normalmenuitem {
  padding: 6px 17px 6px 17px;
  text-decoration: none;
  color: #5f666f;
  transition: .3s color;
  transition: .3s padding;
}
.normalmenuitem:hover {
  color: #292f36 !important;
  padding-left: 20px;
  padding-right: 20px;
}
#trial {
  transition: .3s padding;
  color: #e16065;
}
#trial:hover {
  color: #d64f54;
  padding-left: 20px;
  padding-right: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="navigationmenu">

    <div class="box"></div>

    <div class="nav">
      <a href="http://braemo.com">
        <img id='logo' src="http://images8.webydo.com/92/9273203/3958%2fDCD54DB5-C492-02BA-64C8-6590FD8C816C.png">
      </a>
    </div>

    <div class="holderrr">
      <div class="rightmenu">

        <a class="normalmenuitem" href='#'>Features</a>
        <a class="normalmenuitem" href='#'>Pricing</a>
        <a class="normalmenuitem" href='#'>Blog</a>
        <a class="normalmenuitem" href='#'>Support</a>
        <a class="normalmenuitem" href='#'>Log In</a>
        <a class="rightmenu" id="trial" href='#'>Start Free Trial</a>
      </div>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将left，right和margin属性添加到.navigationmenu中：

.navigationmenu {
    position: fixed;
    width: 100%;
    max-width: 1100px;
    z-index: 1000;

    /* Add these below */
    left: 0;
    right: 0;
    margin: auto;
}