Question

我在这个地方非常新鲜，所以经过几个小时的尝试并且没有达成任何解决方案，我希望有人能在这里找到答案...我的导航菜单不在中间浏览器屏幕（它是23px关闭到浏览器的右侧）任何解决方案？

Jsfiddle

P.S。如果你不首先放大jsfiddle的视口，你可能没有看到我的意思......

Answer 1

问题：

您的TWinControl.UpdateShowing宽度小于其子项，因此它不居中。您可以增加宽度或执行以下解决方案。

解决方案：

您可以移除.menu元素的宽度，然后将.menu提供给display:inline-block;，将.menu提供给其父级（text-align:center;）。

Jsfiddle

Answer 2

我猜你正在寻找这个

＆＃13;

var menuSlider = function() {
  var m, e, g, s, q, i;
  e = [];
  q = 8;
  i = 8;
  return {
    init: function(j, k) {
      m = document.getElementById(j);
      e = m.getElementsByTagName('li');
      var i, l, w, p;
      i = 0;
      l = e.length;
      for (i; i < l; i++) {
        var c, v;
        c = e[i];
        v = c.value;
        if (v == 1) {
          s = c;
          w = c.offsetWidth;
          p = c.offsetLeft
        }
        c.onmouseover = function() {
          menuSlider.mo(this)
        };
        c.onmouseout = function() {
          menuSlider.mo(s)
        };
      }
      g = document.getElementById(k);
      g.style.width = w + 'px';
      g.style.left = p + 'px';
    },
    mo: function(d) {
      clearInterval(m.tm);
      var el, ew;
      el = parseInt(d.offsetLeft);
      ew = parseInt(d.offsetWidth);
      m.tm = setInterval(function() {
        menuSlider.mv(el, ew)
      }, i);
    },
    mv: function(el, ew) {
      var l, w;
      l = parseInt(g.offsetLeft);
      w = parseInt(g.offsetWidth);
      if (l != el || w != ew) {
        if (l != el) {
          var ld, lr, li;
          ld = (l > el) ? -1 : 1;
          lr = Math.abs(el - l);
          li = (lr < q) ? ld * lr : ld * q;
          g.style.left = (l + li) + 'px'
        }
        if (w != ew) {
          var wd, wr, wi;
          wd = (w > ew) ? -1 : 1;
          wr = Math.abs(ew - w);
          wi = (wr < q) ? wd * wr : wd * q;
          g.style.width = (w + wi) + 'px'
        }
      } else {
        clearInterval(m.tm)
      }
    }
  };
}();

＆＃13;

* {
  margin: 0;
  padding: 0
}
body {
  font: 14px Helvetica, sans-serif;
  font-weight: bold;
  background: #DEDEDE
}
.menu {
  width: auto;
  height: 25px;
  margin: 50px auto;
}
.menu ul {
  margin: 0 auto;
  padding: 10px;
  border-radius: 8px;
  height: inherit;
  width: inherit;
  z-index: 10;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #e5e5e5)) #e5e5e5;
  -webkit-box-shadow: 0px 0px 6px #555;
  z-index: 100;
  width: 65%;
}
.menu ul li {
  list-style: none;
  float: left;
  margin-right: 11px;
}
.menu ul li a {
  display: block;
  float: left;
  padding: 4px 8px 8px 8px;
  font-family: helvetica;
  text-shadow: 0px 1px 1px white;
  color: #666;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.27em;
  color: #B2B2B2;
}
.menu li img {
  float: left;
  padding: 4px 3px 8px 8px;
}
.menu .active,
.menu a:hover {
  text-decoration: none;
  color: #654747;
}
#slide {
  position: absolute;
  top: 90px;
  height: 2px;
  background: #654747;
  z-index: 5
}
.gumb {
  display: none;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  height: 20px;
  width: 118px;
  z-index: 10;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #e5e5e5)) #e5e5e5;
  -webkit-box-shadow: 0px 0px 6px #555;
  z-index: 100;
  text-decoration: none;
  font-size: 1.27em;
  color: #B2B2B2;
}
@media screen and (min-width: 721px) {
  #menu {
    display: block !important
  }
}
@media screen and (max-width: 720px) {
  .gumb {
    display: inline-block;
    width: 153px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
  }
  .menu {
    width: auto;
    height: 170px;
    margin: 50px auto;
    z-index: 100;
  }
  #menu {
    display: none;
  }
  #slide {
    display: none;
  }
}

＆＃13;

<body onload="menuSlider.init('menu','slide')">
  <header class="menu">

    <a href="#" class="gumb">
      <img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/16/social-facebook-box-blue-icon.png">
      <img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/16/social-facebook-box-blue-icon.png">
      <img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/16/social-facebook-box-blue-icon.png">
    </a>


    <script>
      jQuery(document).ready(function($) {

        $('.gumb').click(function() {
          $('#menu').slideToggle();
        })
      });
    </script>
    <ul id="menu">

      <li value="1">
        <img src="images/home.png">
        <a class="active" href="index.html">Početna</a>
      </li>

      <li>
        <img src="images/galerija.png">
        <a href="galerija.html">Galerija</a>
      </li>

      <li>
        <img src="images/about.png">
        <a href="festival.html">O festivalu</a>
      </li>

      <li>
        <img src="images/video.png">
        <a href="video.html">Video</a>
      </li>

      <li>
        <img src="images/kontakt.png">
        <a href="kontakt.html">Kontakt</a>
      </li>

    </ul>

    <div id="slide"></div>
  </header>

＆＃13;

Answer 3

只需使用此代码，我在小提琴中更改了它，这对我有用：

.menu {
display:block;
width: 650px;
height: 25px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}

导航菜单未居中

3 个答案: