Навигационное меню не центрировано

Question

Я довольно свежий и новый в этом мире, поэтому, после нескольких часов попыток и решения без каких-либо решений, я надеюсь, что кто-то здесь меня заинтересует ответом ... Мое меню навигации не в центре экрана браузера (это 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; 
}