How can I have all navigation buttons centered?

Question

I tried many ways to center all navigation buttons, I'm using text-align: center but it doesn't help because one of my buttons is an image and has greater height and width. I also had to resize the image because it was way too big.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  background-color: white;
  height: auto;
  width: inherit;
  margin-bottom: 0.5em;
  border-top: 0px;
  border-bottom: 2px;
  border-left: 0px;
  border-right: 0px;
  border-style: inset;
  border-width: auto;
  border-color: red;
}

nav ul {
  list-style-type: none;
  overflow: auto;
}

nav ul li {
  float: left;
  margin-right: 20px;
  height: auto;
  width: auto;
  margin: 10px;
  text-align: center;
}

nav ul li a {
  text-decoration: none;
  display: table;
  width: 100%;
  height: 100%;
}

<header>
  <nav>
    <ul>
      <li>
        <a href="index.html"><img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px"></a>
      </li>
      <li><a href="apps.html"><span>APPS</span></a></li>
      <li><a href="contact.html"><span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

Answer 1

Use Flexbox. It's easier than anything and it can center your navigation elements vertically and horizontally at the same time.

nav {
  background:#eee;
  width:500px;
  padding:10px;
  box-sizing:border-box;
}
nav ul { /* this is the magical part */
  display:flex;
  justify-content:space-evenly;
  align-content:center;
  flex-flow:row wrap;
  margin:0;
  padding:0;
}
nav li {
  list-style:none;
}
nav a {
  display:block;
  text-decoration:none;
  background-color:#ccc;
  padding:5px 20px;
}
a.logo {
  display:block;
  height:30px;
  width:25px;
  padding:0;
  background:url("https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be") 0 -500px #ccc;
}

<nav>
  <ul>
    <li><a href="#" class="logo"></a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
  </ul>
</nav>

Answer 2

To horizontally align center use text-align: center; To vertically align you can use display: table-cell and vertically-align: middle;

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
    background-color: white;
    height: auto;
    width: inherit;
    margin-bottom: 0.5em;
    border-top: 0px;
    border-bottom: 2px;
    border-left: 0px;
    border-right: 0px;
    border-style: inset;
    border-width: auto;
    border-color: red;
}
nav ul{
    list-style-type: none;
    overflow: auto;
    text-align: center;
}
nav ul li{
    display: inline-block;
    margin-right: 20px;
    height: 50px;
    width: 100px;
    margin: 10px;
    text-align: center;
}
nav ul li a {
    text-decoration: none;
    display: table;
    width: 100%;
    height: 100%;
}
nav ul li a span{
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

<header>
            <nav>
                <ul>
                    <li><a href="index.html"><span><img src="https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg" alt="mylogo" style="width: 40px;height: 40px"></span></a></li>
                    <li><a href="apps.html"><span>APPS</span></a></li>
                    <li><a href="contact.html"><span>CONTACT</span></a></li>
                </ul>
            </nav>
        </header>

Answer 3

You can apply display: inline-block; to the li elements (remove all float: left) and text-align: center to the ul, which centers the li s inside the ul:

If you want the two text li vertically centered to the image li, add vertical-align:middle; to the lis

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  background-color: white;
  height: auto;
  width: inherit;
  margin-bottom: 0.5em;
  border-top: 0px;
  border-bottom: 2px;
  border-left: 0px;
  border-right: 0px;
  border-style: inset;
  border-width: auto;
  border-color: red;
}

nav ul {
  list-style-type: none;
  text-align:center;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
  margin: 10px;
  text-align: center;
  vertical-align:middle;
}

nav ul li a {
  text-decoration: none;
}

<header>
  <nav>
    <ul>
      <li>
        <a href="index.html"><img src="http://placehold.it/80x80/fda" alt="mylogo" style="width: 100px;height: 100px"></a>
      </li>
      <li><a href="apps.html"><span>APPS</span></a></li>
      <li><a href="contact.html"><span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

Answer 4

I think this is a nice case for using a simple flex. Set the container (nav ul) to display: flex and specify that its items have to be center-aligned. Finally, you can also indicate how those list items need to be divided in the available space. In the example below I used justify-content: space-around.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  background-color: white;
  height: auto;
  width: inherit;
  margin-bottom: 0.5em;
  border-bottom: 2px inset red;
}

nav ul {
  list-style-type: none;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav ul li {
  margin: 10px 20px 10px 10px;
  text-align: center;
}

nav ul li:last-child {
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  display: block;
  height: 100%;
}

<header>
  <nav>
    <ul>
      <li>
        <a href="index.html"><img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px"></a>
      </li>
      <li><a href="apps.html"><span>APPS</span></a></li>
      <li><a href="contact.html"><span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

Answer 5

You can use display:inline on your list item and remove your current styling for you a tag as this will force all items to be 100% width of the screen. Also, add text-align:center to your ul and this should center your list:

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
    background-color: white;
    height: auto;
    width: inherit;
    margin-bottom: 0.5em;
    border-top: 0px;
    border-bottom: 2px;
    border-left: 0px;
    border-right: 0px;
    border-style: inset;
    border-width: auto;
    border-color: red;
}
nav ul{
    list-style-type: none;
    overflow: auto;
    text-align:center;
}
nav ul li{
    display:inline;
    margin-right: 20px;
    height: auto;
    width: auto;
    margin: 10px;
    text-align: center;
}
nav ul li a{
    text-decoration: none;
}

<header>
            <nav>
                <ul>
                    <li><a href="index.html"><img src="logo.png" alt="mylogo" style="width: 100px;height: 100px"></a></li>
                    <li><a href="apps.html"><span>APPS</span></a></li>
                    <li><a href="contact.html"><span>CONTACT</span></a></li>
                </ul>
            </nav>
        </header>

Hope this helps.