CODEWITHSUNDEEP
htmlcsscentering
Abhirajshri Winsome
Abhirajshri Winsome

Reputation: 175

How can I center a 'ul'?

I'm trying to center a ul for mobiles. This is my HTML code:

<nav>
    <ul class="nav-items">
        <li class="nav-active"><a href="/">Home</a></li>
        <li class="nav-item"><a href="#nav-active">Fruits</a></li>
        <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
    </ul>
</nav>

My CSS code:

.nav-items {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-weight: normal;
   justify-content: flex-end;
   margin-right: 30px;
   margin-top: 20px;
}

And I kept a media query for phones:

@media screen and (max-width: 500px) {
   .nav-items {
       margin: auto;
   }
}

How can I make the ul center (for phones)?

This is what I actually wanted:

Enter image description here

Upvotes: 2

Views: 1306

Answers (10)

Muhammad Ali
Muhammad Ali

Reputation: 1320

very simple and easy method because no forced width or parent div involved.

ul {
  display: table;
  margin: 0 auto;
}
<ul>
    <li>12345678910</li>
    <li>638023274</li>
    <li>12323145645</li>
  </ul>

Upvotes: 1

Boris Volkovich
Boris Volkovich

Reputation: 115

@media screen and (max-width: 500px) {
   .nav-items {
       margin: auto;
       flex-direction: column;
   }
}

If you want the last item to be on a new line:

@media screen and (max-width: 500px) {
    .nav-items {
        margin: auto;
        justify-content: center;
    }

    .nav-items li{
        text-align: center;
    }

   .nav-items li:last-of-type{
        width: 100%;
   }
}

Upvotes: 0

Unai Madariaga
Unai Madariaga

Reputation: 53

Try this CSS code:

nav{
   text-align: center
}

Upvotes: 2

Anonymous Coder
Anonymous Coder

Reputation: 586

File style.css

@media screen and (max-width: 500px) {
    .nav-items {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.sub-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

}

File index.html

<ul class="nav-items">
    <ul class="sub-items">
    <li class="nav-active"><a href="/">Home</a></li>
    <li class="nav-item"><a href="#nav-active">Fruits</a></li>
    </ul>
    <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
</ul>

Enter image description here

Upvotes: 2

ragedcoder
ragedcoder

Reputation: 77

There are multiple ways to do it:

Text align method (based on How can I center <ul> <li> into a div?):

@media screen and (max-width: 500px) {
    .nav-items {
        text-align: center;
    }
    .nav-items>li>ul {
        display: inline-table;
    }
    .nav-items>li {
        display: inline;
    }
}

Using Flexbox: Look at boris's answer.

Upvotes: 1

Unai Madariaga
Unai Madariaga

Reputation: 53

Something of this must be working. Try it:

@media screen and (max-width: 500px) {
    nav{
        display: flex;
        justify-conten: center;
        align-content: center;
        align-items center;
        align-self: center;
    }
}

Upvotes: 1

JS_INF
JS_INF

Reputation: 467

All you need is replace margin: auto with justify-content: space-between;.

Here margin: auto haven't anything to do, because the element already takes the full width of the page. margin: auto is working when the element width is less than the page width while justify-content: space-between; will align the first element at first and the second element at the middle and third at the end.

Here's your code:

.nav-items {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-weight: normal;
   justify-content: flex-end;
   margin-right: 30px;
   margin-top: 20px;
}
@media screen and (max-width: 500px) {
   .nav-items {
       justify-content: space-between;
   }
}

Also, if you want just to make the elements at the middle, you can use justify-content: center;, align-items: center;. That will make them at the middle of the .nav-items.

Example

.nav-items {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-weight: normal;
   justify-content: flex-end;
   margin-right: 30px;
   margin-top: 20px;
}
@media screen and (max-width: 500px) {
   .nav-items {
       justify-content: center;
       align-items: center;
   }
}

Upvotes: 1

Mahesh tamarakar
Mahesh tamarakar

Reputation: 69

This may help. See the output below. I have given the output screenshot link below.

@media screen and (max-width: 500px) {
    .nav-items {
        justify-content: center;
    }

    .nav-items li:nth-of-type(3) {
        width: 100%;
        text-align: center;
    }
}

See the output

Upvotes: 1

Uttam
Uttam

Reputation: 776

If you are not concerned about the bulletins then you can go with <center> tag.

<nav>
  <center>
    <ul class="nav-items">
        <li class="nav-active"><a href="/">Home</a></li>
        <li class="nav-item"><a href="#nav-active">Fruits</a></li>
        <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
    </ul>
  </center>
</nav>

Upvotes: 1

deepak badnaware
deepak badnaware

Reputation: 11

<nav style="text-align: center;" >
    <ul style="list-style-type: none;" >
        <li>google</li>
        <li>bing</li>
        <li>yahoo</li>
    </ul>

</nav>

Upvotes: -1

Related Questions