Zentrieren von Nav-Menü auf dem Bildschirm

Question

Hey, ich bin ziemlich neu in Web-Entwicklung und fragte mich, ob jemand mir helfen könnte mein Problem zu lösen, ich kann nicht scheinen, dass dieses Menü in der Mitte zentriert werden ziemlich viel Code in hier und im nicht sicher, auf welche Elemente zu konzentrieren, und was, wo genau zu konzentrieren, wenn Sie mir erklären könnte, oder eine schnelle Lösung gebe ich wirklich etwas Hilfe

nav ul ul { 
 
    display: none; 
 
    text-align: center; 
 
} 
 
\t 
 
nav ul li:hover>ul { 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
nav ul { 
 
    background: #efefef; 
 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
 
    padding: 0 20px; 
 
    border-radius: 10px; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
    text-align: center; 
 
} 
 

 
nav ul:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
} 
 

 
nav ul li:hover { 
 
    background: #4b545f; 
 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
} 
 

 
nav ul li:hover a { 
 
    color: #fff; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 25px 40px; 
 
    color: #757575; 
 
    text-decoration: none; 
 
} 
 

 
nav ul ul { 
 
    background: #5f6975; 
 
    border-radius: 0px; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
nav ul ul li { 
 
    float: none; 
 
    border-top: 1px solid #6b727c; 
 
    border-bottom: 1px solid #575f6a; 
 
    position: relative; 
 
} 
 

 
nav ul ul li a { 
 
    padding: 15px 40px; 
 
    color: #fff; 
 
} 
 

 
nav ul ul li a:hover { 
 
    background: #4b545f; 
 
} 
 

 
nav ul ul ul { 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 0; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">1</a></li> 
 
     <li><a href="#">2</a> 
 
     <ul> 
 
      <li><a href="#">21</a></li> 
 
      <li><a href="#">22</a></li> 
 
      <li><a href="#">23</a> 
 
      <li><a href="#">24</a> 
 
       <li><a href="">25</a> 
 
       <ul> 
 
        <li><a href="#">251</a></li> 
 
        <li><a href="#">252</a></li> 
 
       </ul> 
 
       </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">3</a> 
 
      <ul> 
 
      <li><a href="#">31</a></li> 
 
      <li><a href="#">32</a></li> 
 
      <li><a href="#">33</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">4</a> 
 
      <ul> 
 
      <li><a href="#">41</a></li> 
 
      <li><a href="#">42</a></li> 
 
      <li><a href="#">43</a></li> 
 
      <li><a href="#">44</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">5</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

Answer 1

Da Sie display: inline-table; würde schätzen, verwenden auf der ul innerhalb der nav Tag können Sie a dd dies die ul in der vollen Breite zum Zentrum nav:

nav { 
    text-align: center; 
} 

nav ul ul { 
 
    display: none; 
 
    text-align: center; 
 
} 
 

 
nav ul li:hover>ul { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
nav { 
 
    text-align: center; 
 
} 
 
nav ul { 
 
    background: #efefef; 
 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
 
    padding: 0 20px; 
 
    border-radius: 10px; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 

 
nav ul:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
} 
 

 
nav ul li:hover { 
 
    background: #4b545f; 
 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
} 
 

 
nav ul li:hover a { 
 
    color: #fff; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 25px 40px; 
 
    color: #757575; 
 
    text-decoration: none; 
 
} 
 

 
nav ul ul { 
 
    background: #5f6975; 
 
    border-radius: 0px; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
nav ul ul li { 
 
    float: none; 
 
    border-top: 1px solid #6b727c; 
 
    border-bottom: 1px solid #575f6a; 
 
    position: relative; 
 
} 
 

 
nav ul ul li a { 
 
    padding: 15px 40px; 
 
    color: #fff; 
 
} 
 

 
nav ul ul li a:hover { 
 
    background: #4b545f; 
 
} 
 

 
nav ul ul ul { 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 0; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">1</a></li> 
 
    <li><a href="#">2</a> 
 
     <ul> 
 
     <li><a href="#">21</a></li> 
 
     <li><a href="#">22</a></li> 
 
     <li><a href="#">23</a> 
 
      <li><a href="#">24</a> 
 
      <li><a href="">25</a> 
 
       <ul> 
 
       <li><a href="#">251</a></li> 
 
       <li><a href="#">252</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">3</a> 
 
     <ul> 
 
      <li><a href="#">31</a></li> 
 
      <li><a href="#">32</a></li> 
 
      <li><a href="#">33</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">4</a> 
 
     <ul> 
 
      <li><a href="#">41</a></li> 
 
      <li><a href="#">42</a></li> 
 
      <li><a href="#">43</a></li> 
 
      <li><a href="#">44</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">5</a> 
 
     </li> 
 
    </ul>

Answer 2

prüfen Sie: Wenn es in Ordnung, ich werde erklären.

nav{ 
 
    text-align:center; 
 
} 
 
nav ul ul { 
 
    display: none; 
 
    text-align: center; 
 
} 
 

 
nav ul li:hover>ul { 
 
    display: block; 
 
    text-align: center; 
 
    width: 88px; 
 
} 
 

 
nav ul { 
 
    background: #efefef; 
 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
 
    padding: 0 20px; 
 
    border-radius: 10px; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
    text-align: center; 
 
} 
 

 
nav ul:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
} 
 

 
nav ul li:hover { 
 
    background: #4b545f; 
 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
} 
 

 
nav ul li:hover a { 
 
    color: #fff; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 25px 40px; 
 
    color: #757575; 
 
    text-decoration: none; 
 
} 
 

 
nav ul ul { 
 
    background: #5f6975; 
 
    border-radius: 0px; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
nav ul ul li { 
 
    float: none; 
 
    border-top: 1px solid #6b727c; 
 
    border-bottom: 1px solid #575f6a; 
 
    position: relative; 
 
} 
 

 
nav ul ul li a { 
 
    padding: 15px 40px; 
 
    color: #fff; 
 
} 
 

 
nav ul ul li a:hover { 
 
    background: #4b545f; 
 
} 
 

 
nav ul ul ul { 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 0; 
 
}

<nav> 
 
<ul> 
 
    <li><a href="#">1</a></li> 
 
    <li><a href="#">2</a> 
 
    <ul> 
 
     <li><a href="#">21</a></li> 
 
     <li><a href="#">22</a></li> 
 
     <li><a href="#">23</a> 
 
     <li><a href="#">24</a> 
 
      <li><a href="">25</a> 
 
      <ul> 
 
       <li><a href="#">251</a></li> 
 
       <li><a href="#">252</a></li> 
 
      </ul> 
 
      </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
     <ul> 
 
     <li><a href="#">31</a></li> 
 
     <li><a href="#">32</a></li> 
 
     <li><a href="#">33</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
     <ul> 
 
     <li><a href="#">41</a></li> 
 
     <li><a href="#">42</a></li> 
 
     <li><a href="#">43</a></li> 
 
     <li><a href="#">44</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
</ul> 
 
</nav>