How can I center a 'ul'?

Question

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:

What do you want exactly do you want to display item in top of the `ul`, item in the middle , item at the end or you just wants all of `li` to be centered at the middle of `ul` or you want the `ul` as overlay add some cleatify to your question there's a lot of valid answers but you don't accept anyone because you are not clear enough — JS_INF, Jul 17 '21 at 13:02

score 2 · Answer 1 · edited Aug 11 '21 at 08:54

2

Try this CSS code:

nav{
   text-align: center
}

edited Aug 11 '21 at 08:54

Peter Mortensen

30,738
21
105
131

answered Jul 17 '21 at 12:27

Unai Madariaga

53
6

score 2 · Accepted Answer · edited Aug 11 '21 at 08:53

2

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>

edited Aug 11 '21 at 08:53

Peter Mortensen

30,738
21
105
131

answered Jul 17 '21 at 12:46

Anonymous Coder

556
2
16

I wanted home and fruits in one row, and veggies in another row. – Abhirajshri Winsome Jul 17 '21 at 13:02
i have edited my code above use that. i have created the sublist inside the list. and also add some margin as you want. – Anonymous Coder Jul 17 '21 at 13:18
1

Obviously, I would : ) – Abhirajshri Winsome Jul 17 '21 at 13:31

score 1 · Answer 3 · edited Aug 11 '21 at 08:47

1

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.

edited Aug 11 '21 at 08:47

Peter Mortensen

30,738
21
105
131

answered Jul 17 '21 at 12:34

ragedcoder

57
11

text-align: center; didn't work for me, boris answer worked, but wasn't the result I actually wanted. – Abhirajshri Winsome Jul 17 '21 at 12:35
@AbhirajshriWinsome make sure everything is inline if you need flexbox lemme edit it – ragedcoder Jul 17 '21 at 12:37
I didn't understand, can you give me the code? – Abhirajshri Winsome Jul 17 '21 at 12:40
`@media screen and (max-width: 500px) { .nav-items { margin: auto; display: inline !important; } }` – ragedcoder Jul 17 '21 at 12:41
It's the exact code that I gave in the question. – Abhirajshri Winsome Jul 17 '21 at 12:42
But the ul is stretching :( – Abhirajshri Winsome Jul 17 '21 at 12:44
I wanted 2 ul's in a row, and another ul in the second row. Both must be in the center. – Abhirajshri Winsome Jul 17 '21 at 12:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235005/discussion-between-ragedcoder-and-abhirajshri-winsome). – ragedcoder Jul 17 '21 at 12:45

score 1 · Answer 4 · edited Aug 11 '21 at 08:46

1

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;
    }
}

edited Aug 11 '21 at 08:46

Peter Mortensen

30,738
21
105
131

answered Jul 17 '21 at 12:39

Unai Madariaga

53
6

Shouldn't there be a colon after "align-items"? Isn't "justify-conten" as misspelling? Both seem to be correct in the question. – Peter Mortensen Aug 11 '21 at 08:34

score 1 · Answer 5 · answered Jul 17 '21 at 13:33

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>

score 1 · Answer 6 · edited Aug 11 '21 at 08:42

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;
   }
}

score 1 · Answer 7 · edited Aug 11 '21 at 08:36

1

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

edited Aug 11 '21 at 08:36

Peter Mortensen

30,738
21
105
131

answered Jul 17 '21 at 13:44

Mahesh tamarakar

69
1
4

Hello and welcome to stackoverflow, here is a suggestion to improve the post : you can add a language identifier to highlight the code and make it more readable. – I_love_vegetables Jul 18 '21 at 05:38
More concrete: *[What is syntax highlighting and how does it work?](https://meta.stackexchange.com/questions/184108/what-is-syntax-highlighting-and-how-does-it-work/184109#184109)* – Peter Mortensen Aug 11 '21 at 08:39

score 1 · Answer 8 · answered Aug 11 '21 at 10:27

1

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>

answered Aug 11 '21 at 10:27

Muhammad Ali

956
3
15
20

score 0 · Answer 9 · edited Aug 11 '21 at 08:55

0

@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%;
   }
}

edited Aug 11 '21 at 08:55

Peter Mortensen

30,738
21
105
131

answered Jul 17 '21 at 12:28

Boris Volkovich

115
6

But I want the first two li's to be in one row, and the last one in another row – Abhirajshri Winsome Jul 17 '21 at 12:31
Here the second one – Boris Volkovich Jul 17 '21 at 13:43

score -1 · Answer 10 · answered Jul 17 '21 at 12:38

-1

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

</nav>

answered Jul 17 '21 at 12:38

deepak badnaware

11

An explanation would be in order. Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/68420585/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Aug 11 '21 at 08:23

How can I center a 'ul'?

10 Answers10

File style.css

File index.html

Example