Question

我试图通过创建导航栏来了解HTML和CSS。但是，由于某些原因，我的设计无法正确地将导航栏居中，因此我的徽标偏离了中心。

有关如何更正此问题的任何建议？我为inline属性尝试了inline-block与display。不知道从这里去哪里。

任何示例或帮助将不胜感激。

https://codepen.io/BlackAnvil/pen/yGmdVb

.main-nav {
  text-align: center;
  margin: 10px 0 0px;
  padding: 0;
  list-style: none;
}

.main-nav li {
  display: inline;
  margin: 0 1px;
}

.main-nav li a {
  display: inline-block;
  color: #222222;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  line-height: 20px;
  margin: 17px 32px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.main-section {
  padding: 90px 0 110px;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

h2 {
  font-size: 34px;
  color: #222222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 15px 0;
  text-align: center;
  text-transform: uppercase;
}

<nav class="main-nav-outer">
  <div class="container">
    <ul class="main-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#service">Time Management</a></li>
      <li class="small-logo">
        <a href="#header"><img src="https://www.androidpolice.com/wp-content/cache/wp-appbox/dc848b3c6476144e285aeb051c752d71/ai-9fa710009364b617daae822b5810a844" alt=""></a>
      </li>
      <li><a href="#team">Secure File Management</a></li>
      <li><a href="#">Logout</a></li>
    </ul>
    <a class="res-nav_click" href="#"><i class="fas fa-bars"></i></a>
  </div>
</nav>


<section class="main-section" id="service">
  <!--main-section-start-->
  <div class="container">
    <h2>Services</h2>

  </div>
  </div>
</section>

Answer 1

只需在您的.main-nav中添加一个

display:flex
align-items:center;
justify-content:center;

查看示例：https://codepen.io/mdubus/pen/qLezog

如果您在定位方面遇到问题，应该看看“ flexbox”，它在大多数情况下都会为您提供帮助。玩得开心！

Answer 2

您无需在.main-nav li选择器上进行任何更改即可内嵌文本和徽标：

.main-nav li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1px;
}

也请参见此处：https://codepen.io/anon/pen/jXgjxw

Answer 3

显示：flex

并非所有浏览器都支持。取决于您定位的浏览器。我向您推荐此代码：

.main-nav li {
  display: inline-block;
  margin: 0 1px;
  vertical-align: middle;
}

通知更改：

display: inline-block;
vertical-align: middle;

Answer 4

如果您想使徽标居中，则在您要查找的内容中，一侧有两个单词，另一侧有两个单词。这与单词数无关，而与两边的字符数目有关。

HOME TIME MANAGEMENT          SECURE FILE MANAGEMENT LOGOUT
||||5||||0||||5||||0          ||||5||||0||||5||||0||||5||||

左侧有20个字符.....右侧有29个字符

一种可能的解决方案是在图像前的<pre>中添加9个字符。

  <li><a href="#">Home</a></li>
  <li><a href="#service">Time Management</a></li>
  <pre>          </pre>
  <li class="small-logo">
    <a href="#header"><img src="https://www.androidpolice.com/wp-content/cache/wp-appbox/dc848b3c6476144e285aeb051c752d71/ai-9fa710009364b617daae822b5810a844" alt=""></a>
  </li>
  <li><a href="#team">Secure File Management</a></li>
  <li><a href="#">Logout</a></li>

https://jsfiddle.net/404_Error/rk4c5seh/

为什么导航栏ul项偏离中心？

4 个答案: