CODEWITHSUNDEEP
htmlcss
icefireCZ
icefireCZ

Reputation: 9

I can't center ul

I can't center ul which is a menu. I've tried margin: 0 auto; and text-align: center; and tried to change value of margin but nothing works.

This is my 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;}

This is my 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>

Upvotes: 0

Views: 72

Answers (2)

anujsoft
anujsoft

Reputation: 81

Try this

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

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

Here is one way you can get started.

Make sure you zero out the padding on ul.nav and apply text-align: center to keep the inline blocks centered.

Note that for demonstration purposes, I made the widths and font size smaller, but you get the general idea.

If the elements are wide enough, they will wrap onto a second line.

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>

Upvotes: 1

Related Questions