Cannot center the elements in the navbar-CodePudding

I'm sorry to ask this question because it has been largely posted, but I checked a lot of links and didn't solve it yet. I have a navbar with 2 elements and I cannot center it in the middle of the nav.

#menu {
    background: #000000;
    background: linear-gradient(to bottom,  #973F8E,  #DC4069);
    color: #FFF;
    height: 52px;
    width: 500px;
    padding-left: 18px;
    border-radius: 50px;
    border: 1px solid #000000;
    margin: auto;
    display:block;
    text-align:center !important;
}
#menu ul, #menu li {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
}
#menu ul {
    width: 100%;
}
#menu li {
    float: left;
    display: inline;
    position: relative;
}
#menu a {
    display: block;
    line-height: 50px;
    padding: 0 14px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}

#menu a.dropdown-arrow:after {
    content: "\25BE";
    margin-left: 5px;
}
#menu li a:hover {
    color: #000000;
    background: #FFA6AF;
}
#menu input {
    display: none;
    margin: 0;
    padding: 0;
    height: 52px;
    width: 100%;
    opacity: 0;
    cursor: pointer
}
#menu label {
    display: none;
    line-height: 50px;
    text-align: center;
    position: absolute;
    left: 35px
}
#menu label:before {
    font-size: 1.6em;
    content: "\2261";
    margin-left: 20px;
}
#menu ul.sub-menus{
    height: auto;
    overflow: hidden;
    width: 170px;
    background: #444444;
    position: absolute;
    z-index: 99;
    display: none;
}
#menu ul.sub-menus li {
    display: block;
    width: 100%;
}
#menu ul.sub-menus a {
    color: #FFFFFF;
    font-size: 16px;
}
#menu li:hover ul.sub-menus {
    display: block
}
#menu ul.sub-menus a:hover{
    background: #F2F2F2;
    color: #444444;
}

<nav id="menu">
        <input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
        <ul>
            <li><a href='/'>DASHBOARD</a></li>
            <li><a href='/model'>MODEL</a></li>
        </ul>
    </nav>

Probably in the large number of css elements I'm not able to see where the code is not working.

I posted the code here:

codepen

CodePudding user response：

You should remove the left padding from the main #menu element, set the ul's display to inline-block and the width to auto (just remove the width property).

This will work because the #menu element has text-align: center. the ul will be centered since its width is not 100% (because width is set to auto and the display to inline-block).

#menu {
    background: #000000;
    background: linear-gradient(to bottom,  #973F8E,  #DC4069);
    color: #FFF;
    height: 52px;
    width: 500px;
    padding-left: 0; // remove this
    border-radius: 50px;
    border: 1px solid #000000;
    margin: auto;
    display:block;
    text-align:center !important;
}
#menu ul, #menu li {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
}
#menu ul {
    display: inline-block; // and set this
}
#menu li {
    float: left;
    display: inline;
    position: relative;
}
#menu a {
    display: block;
    line-height: 50px;
    padding: 0 14px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}

#menu a.dropdown-arrow:after {
    content: "\25BE";
    margin-left: 5px;
}
#menu li a:hover {
    color: #000000;
    background: #FFA6AF;
}
#menu input {
    display: none;
    margin: 0;
    padding: 0;
    height: 52px;
    width: 100%;
    opacity: 0;
    cursor: pointer
}
#menu label {
    display: none;
    line-height: 50px;
    text-align: center;
    position: absolute;
    left: 35px
}
#menu label:before {
    font-size: 1.6em;
    content: "\2261";
    margin-left: 20px;
}
#menu ul.sub-menus{
    height: auto;
    overflow: hidden;
    width: 170px;
    background: #444444;
    position: absolute;
    z-index: 99;
    display: none;
}
#menu ul.sub-menus li {
    display: block;
    width: 100%;
}
#menu ul.sub-menus a {
    color: #FFFFFF;
    font-size: 16px;
}
#menu li:hover ul.sub-menus {
    display: block
}
#menu ul.sub-menus a:hover{
    background: #F2F2F2;
    color: #444444;
}

CodePudding user response：

You can use flex positions. Use property justify-content : center to center all children div inside a parent div. It's useful to distribute the space between or around the elements. This will also make your CSS code lighter. The more CSS, the more difficult it is.

It's also good for responsive design.

I have also removed some CSS property. This code can be further improved and reduced. Good luck !

#menu {
    background: #000000;
    background: linear-gradient(to bottom,  #973F8E,  #DC4069);
    color: #FFF;
    height: 52px;
    width: 500px;
    // padding-left: 18px;
    border-radius: 50px;
    border: 1px solid #000000;
    margin: auto;
    // display:block;
    // text-align:center !important;
}
#menu ul, #menu li {
    margin: 0 auto;
    padding: 0;
    // list-style: none;
    // display: block;
    text-align: center;
}
#menu ul {
    width: 100%;
    display: flex;
    justify-content: center;
}
#menu li {
    // float: left;
    margin : 0px;
    display: inline;
    // position: relative;
}
#menu a {
    display: block;
    line-height: 51px;
    padding: 0 14px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}

#menu a.dropdown-arrow:after {
    content: "\25BE";
    margin-left: 5px;
}
#menu li a:hover {
    color: #000000;
    background: #FFA6AF;
}
#menu input {
    display: none;
    margin: 0;
    padding: 0;
    height: 52px;
    width: 100%;
    opacity: 0;
    cursor: pointer
}
#menu label {
    display: none;
    line-height: 50px;
    text-align: center;
    position: absolute;
    left: 35px
}
#menu label:before {
    font-size: 1.6em;
    content: "\2261";
    margin-left: 20px;
}
#menu ul.sub-menus{
    height: auto;
    overflow: hidden;
    width: 170px;
    background: #444444;
    position: absolute;
    z-index: 99;
    display: none;
}
#menu ul.sub-menus li {
    display: block;
    width: 100%;
}
#menu ul.sub-menus a {
    color: #FFFFFF;
    font-size: 16px;
}
#menu li:hover ul.sub-menus {
    display: block
}
#menu ul.sub-menus a:hover{
    background: #F2F2F2;
    color: #444444;
}

<nav id="menu">
        <input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
        <ul>
            <li><a href='/'>DASHBOARD</a></li>
            <li><a href='/model'>MODEL</a></li>
        </ul>
    </nav>