HTML/CSS Center Horizontally on Unordered List not working

MichaelAbrams
April 8, 2023
130 views
3 votes
4 Answers

In my HTML I have an unordered list of links. In my CSS I am trying to center the list of links horizontally on the webpage. Here is my HTML and CSS code:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
}

ul {
    display: inline-block;
    margin: 0px, auto;
    list-style: none;
    padding: 0.5rem;
    background-color: black;
}

li {
    display: inline-block;
    margin-inline: 0.5rem;
}

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

li a:hover, li a:focus {
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display</title>
    <link rel="stylesheet" href="practice.css">
</head>

<body>
    <main>
        <nav>
            <ul>
                <li><a href="#">Intro</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Projects</a></li>
            </ul>
        </nav> 
        
    </main>
</body>

</html>

I thought setting the unordered list to an inline-block would allow me to apply margins onto the unordered list element. If so, my margins were set to margin: 0px, auto; which should have centered the unordered list horizontally, but for some reason none of the CSS is being applied. I am very much focused on WHY this does not work rather than an alternative solution. Thanks!

Tags: css html

Answers

- KamilGuliyev
- April 8, 2023 at 5:49 pm
- 0 votes
0
Change this line:
```
margin: 0px, auto;
```
To this:
```
margin: 0px auto;
```
To fix the issue, you can change the comma to a space. This should center your unordered list horizontally on the webpage.
Login or Signup to reply.

It’s not centered because it flows on the page in the same way inline elements do. You can achieve centering by making the ul element’s position absolute and the usage of the transform property:

ul {
    display: inline-block;
    position: absolute;
    left: 50%;
    margin: 0;
    list-style: none;
    padding: 0.5rem;
    background-color: black;
    transform: translateX(-50%);
}

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
}

ul {
    display: inline-block;
    position: absolute;
    left: 50%;
    margin: 0;
    list-style: none;
    padding: 0.5rem;
    background-color: black;
    transform: translateX(-50%);
}

li {
    display: inline-block;
    margin-inline: 0.5rem;
}

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

li a:hover, li a:focus {
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display</title>
    <link rel="stylesheet" href="practice.css">
</head>

<body>
    <main>
        <nav>
            <ul>
                <li><a href="#">Intro</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Projects</a></li>
            </ul>
        </nav> 
        
    </main>
</body>

</html>

Two things you need to do:

1 . Give display: flex to your nav

nav{
 display: flex
}

2 . margin is not correctly provided for ul, it should be without a comma

margin: 0px auto;

Working code below:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

nav {
  display: flex;
}

body {
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
}

ul {
  display: inline-block;
  margin: 0 auto;
  list-style: none;
  padding: 0.5rem;
  background-color: black;
}

li {
  display: inline-block;
  margin-inline: 0.5rem;
}

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

li a:hover,
li a:focus {
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Display</title>
  <link rel="stylesheet" href="practice.css">
</head>

<body>
  <main>
    <nav>
      <ul>
        <li><a href="#">Intro</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </nav>

  </main>
</body>

</html>

Kamil is correct. There is an error in your syntax. Remove the comma from your margin declaration.

To center your list you should remove display:inline-block; from your ul and add a width less than 100%. This will allow your list to be centered on the page.

Inline-block elements do not have an inherent width. Therefore, margin:auto; will not work.

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
}

ul {
    width: 80%;
    margin: 0px auto;
    list-style: none;
    padding: 0.5rem;
    background-color: black;
}

li {
    display: inline-block;
    margin-inline: 0.5rem;
}

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

li a:hover, li a:focus {
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display</title>
    <link rel="stylesheet" href="practice.css">
</head>

<body>
    <main>
        <nav>
            <ul>
                <li><a href="#">Intro</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Projects</a></li>
            </ul>
        </nav> 
        
    </main>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.