导航菜单不居中

Question

我很新鲜，在这个teritory新，所以经过几个小时的尝试，并没有达成任何解决方案，我希望有人在这里将enligthen与我的答案...我的导航菜单不集中在浏览器屏幕的中间（它位于浏览器右侧的23px）任何解决方案？

Jsfiddle

P.S.它的响应，所以你可能不明白我的意思，如果你不放大的jsfiddle第一的视...

Answer 1

问题：

你.menu宽度大于它的孩子小，因此它不居中。您可以增加宽度或执行以下解决方案。

解决方案：

可以删除.menu元件的宽度，然后给display:inline-block;到.menu和text-align:center;到它的父（body）。

Jsfiddle

Answer 2

我猜你正在寻找这个

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

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

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

Answer 3

只要使用这个代码，我改变了它的小提琴，这对我的作品：

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