Как центрировать навигационную панель?

Question

У меня есть тройная центровка моей навигационной панели до середины моей страницы. На данный момент я еще ничего не сделал.

HTML

<div class = "menu-wrap"> 

<nav class = "navMenu"> 

    <ul class = "ulMenu"> 

     <li><a href = "index.html">Home</a></li> 

      <li> 

      <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 

       <ul> 
        <li><a href = "#">#</a></li> 
        <li><a href = "#">#</a></li> 
       </ul> 

      </li> 

     <li><a href = "contact.html">Contact Us</a></li> 
     <li><a href = "aboutUs.html">About </a></li> 

    </ul> 

</nav> 

Answer 1

Вы должны добавить некоторые CSS, чтобы задать свойство класса, которые будут определять свойство элементов, определенные в качестве членов этих классов.

Что-то вроде этого

#menu-wrap { 
    width:750px; 
    margin:0 auto; 
    list-style:none; 
} 

Вы можете обратиться к этой tutorial

Answer 2

Поэтому для того, чтобы выровнять элементы макета. Вы захотите использовать CSS. Надеемся, вам это поможет:

При создании горизонтального элемента навигации мы обычно используем свойства или display:inline, чтобы заставить отдельные ссылки на одной линии. Чтобы центрировать весь элемент nav, вы могли бы дать ему ширину, как я здесь сделал, что позволяет нам установить ее маржу в auto, которая горизонтально центрирует весь div.

nav ul li{ 
 
    list-style:none; 
 
    float:left; 
 
    margin:5px; 
 
} 
 

 
nav{ 
 
    height:50px; 
 
    display:table; 
 
    background:#eee; 
 
    margin:auto; 
 
}

<div class = "menu-wrap"> 
 

 
<nav class = "navMenu"> 
 

 
    <ul class = "ulMenu"> 
 

 
     <li><a href = "index.html">Home</a></li> 
 

 
      <li> 
 

 
      <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 
 

 
       <ul> 
 
        <li><a href = "#">#</a></li> 
 
        <li><a href = "#">#</a></li> 
 
       </ul> 
 

 
      </li> 
 

 
     <li><a href = "contact.html">Contact Us</a></li> 
 
     <li><a href = "aboutUs.html">About </a></li> 
 

 
    </ul> 
 

 
</nav>

Тем не менее, это выглядит ужасно. С небольшим количеством стилей CSS вы можете превратить это меню в нечто отличное.

Answer 3

Добавить ALIGN = "Центр"

<div class = "menu-wrap" align="center">

Answer 4

.ul { 
 
    display: -webkit-flex; 
 
    display: flex; 
 

 
    -webkit-justify-content: center; 
 
    justify-content: center; \t \t 
 

 
    -webkit-align-items: center; 
 
    align-items: center; 
 

 
    width: 100%; 
 
    height: auto; 
 
    background-color: lightgrey; \t \t \t \t \t \t \t 
 
} 
 

 
.li { 
 
    background-color: white; 
 
    padding: 0.5rem; 
 
    margin: 0.5rem; \t \t \t \t \t \t \t 
 

 
    -webkit-align-self: center; \t \t \t \t \t \t \t 
 
    align-self: center; 
 
} 
 

 
a .li:hover { 
 
    color: #000000; 
 
    background-color: lightgreen; 
 
    cursor: pointer; 
 
}

<div class = "menu-wrap"> 
 

 
<div class="ul"> 
 
    <a><div class="li">Home</div></a> 
 
    <a><div class="li">Products</div></a> 
 
    <a><div class="li">Contact Us</div></a> 
 
    <a><div class="li">About</div></a> \t \t \t \t 
 
</div> 
 
    
 
</div>