How can I have all navigation buttons centered? - html

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>
<img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px">
</li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>

Answer 1

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>
<img src="http://placehold.it/80x80/fda" alt="mylogo" style="width: 100px;height: 100px">
</li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>

Answer 2

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>
<img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px">
</li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>

Answer 3

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><span><img src="https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg" alt="mylogo" style="width: 40px;height: 40px"></span></li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>

Answer 4

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><img src="logo.png" alt="mylogo" style="width: 100px;height: 100px"></li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>
Hope this helps.

Answer 5

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></li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</nav>