Я не могу центр ul

Question

Я не могу сосредоточиться ul, который является меню. Я пробовал margin: 0 auto; и text-align: center; и попытался изменить значение margin, но ничего не работает.

Это мой CSS:

html { 
font-family: 'Exo';} 

body { 
background: #1a1a1a;} 

.nav { 
margin-left: 50%;} 

.nav li { 
display: inline-block; 
color: white; 
padding: 15px; 
margin-left: 10px; 
border: 3px solid #2E9FFF; 
text-align: center; 
width: 225px; 
background-color: DodgerBlue; 
font-size: 200%; 
transition: ease 0.5s; 
text-decoration: none;} 

.nav li:hover { 
cursor: pointer; 
border: 3px solid #2E9FFF; 
border-radius: 50px; 
background-color: #1a1a1a;} 

.nav li a { 
text-decoration: none; 
color: white;} 

Это мой HTML:

<ul class="nav"> 
    <li><a href="#">Najdi si hru</a></li> 
    <li><a href="#">Jaký je náš cíl?</a></li> 
    <li><a href="#">Kontakt</a></li> 
</ul> 

Answer 1

Вот один из способов вы можете начать работу.

Удостоверьтесь, что вы отбрасываете прокладку на ul.nav и применяете text-align: center, чтобы сохранить встроенные блоки по центру.

Обратите внимание, что в демонстрационных целях я уменьшил ширину и размер шрифта, но вы получите общую идею.

Если элементы достаточно широкие, они будут обертываться на вторую линию.

html { 
 
    font-family: 'Exo'; 
 
} 
 
body { 
 
    background: #1a1a1a; 
 
} 
 
.nav { 
 
    margin-left: 100px; 
 
    border: 1px dotted yellow; 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 15px; 
 
    border: 3px solid #2E9FFF; 
 
    text-align: center; 
 
    width: 100px; 
 
    background-color: DodgerBlue; 
 
    font-size: 100%; 
 
    transition: ease 0.5s; 
 
    text-decoration: none; 
 
} 
 
.nav li:hover { 
 
    cursor: pointer; 
 
    border: 3px solid #2E9FFF; 
 
    border-radius: 50px; 
 
    background-color: #1a1a1a; 
 
} 
 
.nav li a { 
 
    text-decoration: none; 
 
    color: white; 
 
}

<ul class="nav"> 
 
    <li><a href="#">Najdi si hru</a></li> 
 
    <li><a href="#">Jaký je náš cíl?</a></li> 
 
    <li><a href="#">Kontakt</a></li> 
 
</ul>

Answer 2

Попробуйте

.nav {/*margin-left: 50%;*/ min-width:20%; display:table; margin:0 auto; padding:0}