How do I get my menu to centre on all displays - html

Question

http://jsfiddle.net/aw4zgwso/
Here's what's happening at the moment and I can't seem to center the nav menu unless I add something like width:40% to .menu But that doesn't work well and will knock the text down on smaller resolution displays
.nav {
width:100%;
height:40px;
display:block;
background-color:#313131;
}
.nav_inner {
height:100%;
margin:0 auto;
position:relative;
}
.nav_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 40px;
line-height: 15px;
}
.nav_menu li {
float: left;
}
.nav_menu li a {
display: block;
color:#ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: red;
color:white;
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
background:#3e3436;
}
.menu {
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
color:#ffffff;
text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#ffffff;
}
.menu .arrow {
font-size:12px;
line-height:0%;
color:#00AAFF;
padding-left: 5px;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:16px;
color: #ffffff;
}
.menu > ul > li > a {
padding:9px 40px;
display:inline-block;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#191919;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:95%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#313131;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#191919;
}
<div class="nav">
<div class="nav_inner">
<nav class="hide-mobile menu">
<ul class="clearfix">
<li>Home</li>
<li>About us<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Our Values</li>
<li>Technology Partners</li>
</ul>
</li>
<li>IT Solutions<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Audio Visual</li>
<li><a href="backup-replication-business-continuity.html">Backup, Replication and
<li>Visitor & Entry Management</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>

Answer 1

You can simply use text-align:center and make li inline-block like this :
.menu>ul {
text-align: center;
margin: 0;
padding: 0;
}
.menu>ul>li {
display: inline-block;
position: relative;
font-size: 16px;
color: #ffffff;
}
here is the full code
.nav {
width: 100%;
height: 40px;
display: block;
background-color: #313131;
}
.nav_inner {
height: 100%;
margin: 0 auto;
position: relative;
}
.nav_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 40px;
line-height: 15px;
}
.nav_menu li {
float: left;
}
.nav_menu li a {
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: red;
color: white;
}
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
background: #3e3436;
}
.menu {
margin: 0px auto;
}
.menu li {
margin: 0px;
list-style: none;
}
.menu a {
color: #ffffff;
text-decoration: none;
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: #ffffff;
}
.menu .arrow {
font-size: 12px;
line-height: 0%;
color: #00AAFF;
padding-left: 5px;
}
/*----- Top Level -----*/
.menu>ul {
text-align: center;
margin: 0;
padding: 0;
}
.menu>ul>li {
display: inline-block;
position: relative;
font-size: 16px;
color: #ffffff;
}
.menu>ul>li>a {
padding: 9px 40px;
display: inline-block;
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #191919;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 95%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background: #313131;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #191919;
}
<div class="nav">
<div class="nav_inner">
<nav class="hide-mobile menu">
<ul class="clearfix">
<li>Home</li>
<li>About us<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Our Values</li>
<li>Technology Partners</li>
</ul>
</li>
<li>IT Solutions<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Audio Visual</li>
<li><a href="backup-replication-business-continuity.html">Backup, Replication and
<li>Visitor & Entry Management</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>

Answer 2

try this :
ul {
text-align: center;
}
.menu > ul > li {
float: none;
}

Answer 3

Set text-align: center; for parent(.menu) and display: inline-block; for children(.clearfix).
.menu {
text-align: center;
}
.clearfix {
display: inline-block;
padding:0;
}
.menu li {
bottom: 12px;
//more code...
}
.nav { width:100%; height:40px; display:block; background-color:#313131;}
.nav_inner {height:100%; margin:0 auto; position:relative;}
.nav_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 40px;
line-height: 15px;
}
.nav_menu li {
float: left;
}
.nav_menu li a {
display: block;
color:#ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: red;
color:white;
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
background:#3e3436;
}
.menu {
text-align: center;
}
.clearfix {
display: inline-block;
padding:0;
}
.menu li {
bottom: 12px;
list-style:none;
}
.menu a {
color:#ffffff;
text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#ffffff;
}
.menu .arrow {
font-size:12px;
line-height:0%;
color:#00AAFF;
padding-left: 5px;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:16px;
color: #ffffff;
}
.menu > ul > li > a {
padding:9px 40px;
display:inline-block;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#191919;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:95%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#313131;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#191919;
}
<div class="nav">
<div class="nav_inner">
<nav class="hide-mobile menu">
<ul class="clearfix">
<li>Home</li>
<li>About us<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Our Values</li>
<li>Technology Partners</li>
</ul>
</li>
<li>IT Solutions<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Audio Visual</li>
<li><a href="backup-replication-business-continuity.html">Backup, Replication and
<li>Visitor & Entry Management</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>

Answer 4

To center the menu you just need to add this CSS to your menu. I'm diffinatly sure it's helpful for you.
.menu ul {
margin: 0 auto;
display: table;
}
.nav {
width:100%;
height:40px;
display:block;
background-color:#313131;
}
.nav_inner {
height:100%;
margin:0 auto;
position:relative;
}
.nav_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 40px;
line-height: 15px;
}
.nav_menu li {
float: left;
}
.nav_menu li a {
display: block;
color:#ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: red;
color:white;
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
background:#3e3436;
}
.menu {
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
color:#ffffff;
text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#ffffff;
}
.menu .arrow {
font-size:12px;
line-height:0%;
color:#00AAFF;
padding-left: 5px;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:16px;
color: #ffffff;
}
.menu > ul > li > a {
padding:9px 40px;
display:inline-block;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#191919;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:95%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#313131;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#191919;
}
<div class="nav">
<div class="nav_inner">
<nav class="hide-mobile menu">
<ul class="clearfix">
<li>Home</li>
<li>About us<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Our Values</li>
<li>Technology Partners</li>
</ul>
</li>
<li>IT Solutions<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Audio Visual</li>
<li><a href="backup-replication-business-continuity.html">Backup, Replication and
<li>Visitor & Entry Management</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>

Answer 5

/HTML/
<div class="nav">
<div class="nav_inner">
<nav class="hide-mobile menu">
<ul class="navs">
<li>Home</li>
<li>About us<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Our Values</li>
<li>Technology Partners</li>
</ul>
</li>
<li>IT Solutions<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Audio Visual</li>
<li><a href="backup-replication-business-continuity.html">Backup, Replication and
<li>Visitor & Entry Management</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
.nav { width:100%;display:block; text-align:center;background-color:#313131;}
.nav_inner {height:100%; margin:0 auto; position:relative;text-align:center}
.nav_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
line-height: 15px;
}
.nav_menu li {
display:inline-block;
}
.nav_menu li a {
display: block;
color:#ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: red;
color:white;
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
background:#3e3436;
}
.menu {
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
color:#ffffff;
text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#ffffff;
}
.menu .arrow {
font-size:12px;
line-height:0%;
color:#00AAFF;
padding-left: 5px;
}
.navs {
float: left;
width: 100%;
}
/*----- Top Level -----*/
.menu > ul > li {
display:inline-block;
position:relative;
font-size:16px;
color: #ffffff;
}
.menu > ul > li > a {
padding:9px 40px;
display:inline-block;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#191919;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:95%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#313131;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#191919;
}

Answer 6

Using text-align: center to horizontally center nested elements
If you declare text-align: center on the containing parent element (.menu > ul), remove any arbitrary margin or padding that may offset horizontal alignment, and remove the float rule declared on the list items (li) - you should achieve the intended result.
Note: for horizontal alignment, using text-align: center to work as expected, a few requirements should be met:
The containing parent element must be a block element (e.g:
display: block)
The nested elements you need centered should be inline-block
elements (e.g: display: inline-block)
No float rules should be declared on the nested elements you are
intending to horizontally align, float rules will negate any effort
to align elements in this way
.nav {
width:100%;
height:40px;
display:block;
background-color:#313131;
}
.nav_inner {
height:100%;
margin:0 auto;
position:relative;
}
.nav_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 40px;
line-height: 15px;
}
/* Additional */
.menu > ul {
margin: auto;
padding: 0px; /* remove arbitrary padding */
text-align: center;
}
/* end Additional */
.nav_menu li {
float: left;
}
.nav_menu li a {
display: block;
color:#ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: red;
color:white;
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
background:#3e3436;
}
.menu {
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
color:#ffffff;
text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#ffffff;
}
.menu .arrow {
font-size:12px;
line-height:0%;
color:#00AAFF;
padding-left: 5px;
}
/*----- Top Level -----*/
.menu > ul > li {
float:none; /* remove float */
display:inline-block;
position:relative;
font-size:16px;
color: #ffffff;
}
.menu > ul > li > a {
padding:9px 40px;
display:inline-block;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#191919;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:95%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#313131;
}
.sub-menu li {
display:block;
font-size:16px;
text-align: left; /* retain left text-alignment on submenu list items */
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#191919;
}
<div class="nav">
<div class="nav_inner">
<nav class="hide-mobile menu">
<ul class="clearfix">
<li>Home</li>
<li>About us<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Our Values</li>
<li>Technology Partners</li>
</ul>
</li>
<li>IT Solutions<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Audio Visual</li>
<li><a href="backup-replication-business-continuity.html">Backup, Replication and
<li>Visitor & Entry Management</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
Or... you could Just use Flex...
Using flex-box to horizontally center nested elements
By declaring display: flex on a parent element and justify-content: center you will be able to horizontally center elements. flex-box is actually great for list items specifically since it usually required specific nested children, e.g: ordered (ol) or unordered (ul) lists only accept li elements as directly nested children for valid markup, and flex-box typically has a parent-to-direct-child "dependency" (so in other words, flex-box rules work great for directly nested children, but may adversely affect other elements nested deeper in/down the DOM tree in ways you are either not anticipating or do not desire).
/* Additional */
.menu > ul {
display: flex;
padding: 0px;
margin: auto;
justify-content: center;
}
See collapsed Code Snippet below demonstrating flex-box solution
.nav {
width:100%;
height:40px;
display:block;
background-color:#313131;
}
.nav_inner {
height:100%;
margin:0 auto;
position:relative;
}
.nav_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 40px;
line-height: 15px;
}
/* Additional */
.menu > ul {
display: flex;
padding: 0px;
margin: auto;
justify-content: center;
}
/* end Additional */
.nav_menu li {
float: left;
}
.nav_menu li a {
display: block;
color:#ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: red;
color:white;
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
background:#3e3436;
}
.menu {
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
color:#ffffff;
text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#ffffff;
}
.menu .arrow {
font-size:12px;
line-height:0%;
color:#00AAFF;
padding-left: 5px;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:16px;
color: #ffffff;
}
.menu > ul > li > a {
padding:9px 40px;
display:inline-block;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#191919;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:95%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#313131;
}
.sub-menu li {
display:block;
font-size:16px;
text-align: left; /* retain left text-alignment on submenu list items */
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#191919;
}
<div class="nav">
<div class="nav_inner">
<nav class="hide-mobile menu">
<ul class="clearfix">
<li>Home</li>
<li>About us<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Our Values</li>
<li>Technology Partners</li>
</ul>
</li>
<li>IT Solutions<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Audio Visual</li>
<li><a href="backup-replication-business-continuity.html">Backup, Replication and
<li>Visitor & Entry Management</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
Heads up! flex-box has poor or limited support for legacy browsers, so if this is going to be a concern for you, it's probably better not to use it in production.
IE <= 9 - Not Supported
IE 10,11 - Partial Support
See more: https://caniuse.com/#feat=flexbox