如何使导航栏以不同的分辨率居中？

Question

经过几个小时的搜索，我仍然无法找到解决我的愚蠢问题的方法，我是新手，但在我的主显示器上它居中很好

1920x1080: Larger image

但是我的 1280x1024: Smaller image

正如您所看到的那样，它的平衡令人不安，所以这是我的网站代码..

/*---Start Navbar---*/

.nav-main {
  display: block;
  list-style: none;
  position: relative;
  width: 100%;
  height: 70px;
  /* Adds shadow to the bottom of the bar */
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;
  /* Adds the transparent background */
  background-color: rgba(1, 1, 1, 0.8);
  color: rgba(1, 1, 1, 0.8);
}
.nav-logo {
  float: left;
  height: 40px;
  padding: 15px 20px;
  line-height: 60px;
  display: inline-block;
  list-style-type: none;
}
ul {
  text-align: center;
  position: relative;
  margin: 0;
  padding: 0;
  float: left;
  left: 30%;
  list-style-type: none;
  display: inline-block;
}
ul li {
  float: inherit;
}
.nav-item {
  display: inline-block;
  list-style-type: none;
  padding: 15px 20px;
  height: 40px;
  width: auto;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
}
li a:hover {
  background-color: #444;
}
/*---End Navbar---*/

<nav class="nav-main">
  <ul>
    <li>
      <a href="http://phalanxgaming.org/" class="nav-logo" target="_blank">
        <img src="http://i.imgur.com/sg5DZao.png?2" alt="logo" style="width:60px;height:60px;">
      </a>
    </li>
    <li>
      <a href="https://docs.google.com/forms/d/1ukgWHC3_xFmkxiCEhb-ZN9dYw2kHWQEyo_inPW7u0mw/viewform?usp=send_form" class="nav-item" target="_blank">CONTACT US</a>
    </li>
    <li>
      <a href="ts3server://tsgb1.vilayer.com:10022/?nickname=" class="nav-item">TEAMSPEAK</a>
    </li>
    <li>
      <a href="https://www.paypal.me/PhalanxGaming" class="nav-item" target="_blank">DONATE</a>
    </li>
    <li>
      <a href="http://steamcommunity.com/groups/P-GC" class="nav-item" target="_blank">STEAM</a>
    </li>
    <li>
      <a href="http://www.twitch.tv/phalanxgamingofficial/" class="nav-item">TWITCH</a>
    </li>
  </ul>
</nav>

任何和所有的支持都很棒，ps对不起，我很累，在解决这个问题之前我无法入睡。

Answer 1

将其包装在 div 中并使用 width:auto 怎么样？ http://www.456bereastreet.com/lab/width-auto/

Answer 2

您需要做的是内联显示您的列表元素。所以设置

ul li {
/*  float: inherit; */
display: inline;
}

之后，只需删除 ul 样式上的 float 和 left 属性，并将 .nav-mains height 设置为 auto。

检查this。

Answer 3

首先，移除

left: 30%;

来自

ul {...}

然后改变这个：

ul li {
    display: inline-block;
    vertical-align: middle;
}

如何使导航栏以不同的分辨率居中？

How to center a navbar on a different resolution?

html

css

center

navbar