Question

This is my navigation bar:

#main-nav-bar .nav-item {
  display: inline-block;
  padding: 0.5%;
  border-right: 1px solid white;
}
#main-nav-bar a {
  text-decoration: none;
  color: #CFCFE0;
}

<nav id="main-nav-bar">
  <a href="#Services" class="nav-tab nav-item selected">Services</a>
  <a href="#Resources" class="nav-tab nav-item">Resources</a>
  <a href="#Contact-Us" class="nav-tab nav-item">Contact Us</a>
  <a href="#Company" class="nav-tab nav-item">Company</a>

  <form class="searchbar nav-item" action="http://www.google.com/search" name="f" target="_blank">
    <input size="10" name="q" value="" class="searchform">&nbsp;
    <input type="submit" value="Go!" name="btnG" class="searchbutton">
    <br>
  </form>
</nav>

I want to center the 5 items inside the nav element in a responsive way. I tried to set the margins, but that is still not perfect centering.

How do I center them ?

Answer 1

在display:flex

中使用justify-content:center和#main-nav-bar

#main-nav-bar {
  display: flex;
  justify-content: center;
  border:1px dashed red;
  background:green
}
#main-nav-bar .nav-item {
  display: inline-block;
  padding: 0.5%;
  border-right: 1px solid white;
}
#main-nav-bar a {
  text-decoration: none;
  color: #CFCFE0;
}

<nav id="main-nav-bar">
  <a href="#Services" class="nav-tab nav-item selected">Services</a>
  <a href="#Resources" class="nav-tab nav-item">Resources</a>
  <a href="#Contact-Us" class="nav-tab nav-item">Contact Us</a>
  <a href="#Company" class="nav-tab nav-item">Company</a>
  <form class="searchbar nav-item" action="http://www.google.com/search" name="f" target="_blank">
    <input size="10" name="q" value="" class="searchform">&nbsp;
    <input type="submit" value="Go!" name="btnG" class="searchbutton">
    <br>
  </form>
</nav>

Answer 2

Hopefully something like this is what you're looking for. If not please let me know so I can try to help you more.

#main-nav-bar .nav-item {
  display: inline-block;
  padding: 0.5%;
  border-right: 1px solid white;
  text-align: center;
}
#main-nav-bar {
  text-align: center;
}
#main-nav-bar a {
  text-decoration: none;
  color: #CFCFE0;
}

<nav id="main-nav-bar">
  <a href="#Services" class="nav-tab nav-item selected">Services</a>
  <a href="#Resources" class="nav-tab nav-item">Resources</a>
  <a href="#Contact-Us" class="nav-tab nav-item">Contact Us</a>
  <a href="#Company" class="nav-tab nav-item">Company</a>

  <form class="searchbar nav-item" action="http://www.google.com/search" name="f" target="_blank">
    <input size="10" name="q" value="" class="searchform">&nbsp;
    <input type="submit" value="Go!" name="btnG" class="searchbutton">
    <br>
  </form>
</nav>

Answer 3

This should help:

#main-nav-bar a {
text-decoration: none;
color: #CFCFE0;
text-align: center;
}

To create a responsive menu try looking into using javascript and if you are unfamiliar with that an alternative would be to use @media queries in your css.

Answer 4

Just an add on to QoP's answer - I would add margin: 0 auto; to the #main-nav-bar id CSS. Normally if you can't get an element centered, the easiest thing to do is wrap it in a "container" element that you can then center. So for example in this case, it would be something like this:

#main-nav-bar{
  width:100%;
  margin: 0 auto;
  text-align:center;
}

The most common CSS tags to center elements are:
margin-left: auto, margin-right: auto, text-align: center;, width: 100%;

Using CSS @media tags are also super helpful too. You can set the max-width of the screen to a specific number so that once you resize the screen, it will adjust accordingly.

@media screen and (max-width: 600px){
    #main-nav-bar{
        width: 100%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

Answer 5

有一种简单的方法可以做到这一点。它被称为display: flex。将导航栏的显示模式更改为display: flex，然后添加align-content: center和justify-content: center。这应该使导航栏子项垂直和水平居中。

How do I center elements in a div or nav element?

5 个答案: